:host {
    --g2cp-background-color: #333;
    --g2cp-background-color-hover: #000;
    --g2cp-button-color: #fff;
    --g2cp-button-color-hover: #333;
    --g2cp-button-color-active: #fff;
    --g2cp-button-background-color: #333333aa;
    --g2cp-button-background-color-hover: #ffd700;
    --g2cp-button-background-color-active: #800080;
    --_next: 100%;
    --_prev: -100%;
    --_duration: 500ms;
    --_timing: cubic-bezier(.25, .8, .25, 1);
    display: block;
    position: relative;
    width: 100%;
}

:host .slides:has(+ .controls .prev:hover) {
    --_next: -100%;
    --_prev: 100%;
}

@keyframes slideIn {
    0% {
        transform: translateX(var(--_next));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    0% {
        opacity: 1;
        transform: translateX(0) scale(100%);
    }
    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(var(--_prev)) scale(75%);
    }
}

* {
    appearance: none;
    background: none;
    border: none;
    box-sizing: border-box;
    color: inherit;
    font-size: 1em;
    margin: 0;
    outline: none;
    padding: 0;
}

@supports not selector(:has(+ *)) {
    .slides li {
        animation: none !important;
        opacity: 0;
        transition: opacity var(--_duration) var(--_timing);
    }

    .slides li.is-active {
        opacity: 1;
    }
}

ul {
    background-color: var(--g2cp-background-color);
    display: grid;
    list-style: none;
    overflow: hidden;
}

ul:has(a:hover) {
    background-color: var(--g2cp-background-color-hover);
}

ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-row: 1;
    grid-column: 1;
    position: relative;
    width: 100%;
    z-index: 1;
}

ul li.is-active {
    animation: slideIn var(--_duration) var(--_timing) forwards;
    z-index: 2;
}

ul li:has(~ li.is-active) {
    transform: translateX(var(--_prev));
}

ul li:has(+ li.is-active) {
    animation: slideOut var(--_duration) var(--_timing) forwards;
}

ul li.is-active ~ li {
    transform: translateX(var(--_next));
}

.slides:has(li.is-active:first-child) li:last-child {
    animation: slideOut var(--_duration) var(--_timing) forwards;
}

ul li a {
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: .75rem;
    text-align: center;
    text-decoration: none;
}

ul li a * {
    display: block;
    flex-shrink: 0;
    height: auto;
    max-height: 40rem;
    width: 100%;
}

ul figure img {
    transform: scale(1);
    transform-origin: bottom center;
    transition: transform 100ms ease-in-out;
}

.slides:has(a:hover) li.is-active figure img {
    transform: scale(1.05);
    transition-duration: 250ms;
}

ul li a figcaption {
    padding: .5rem 1rem;
    text-align: left;
}

.controls {
    display: flex;
    inset: 50% -.5rem;
    justify-content: space-between;
    position: absolute;
    width: calc(100% + 1rem);
    z-index: 3;
}

.controls button {
    background-color: transparent;
    box-sizing: content-box;
    color: var(--g2cp-button-color);
    height: 1rem;
    padding: 1rem;
    transition: all 200ms ease-in-out;
    width: 1rem;
}

ul:hover + .controls button {
    background-color: var(--g2cp-button-background-color);
}

.controls button:hover {
    background-color: var(--g2cp-button-background-color-hover);
    color: var(--g2cp-button-color-hover);
}

.controls button:active {
    background-color: var(--g2cp-button-background-color-active);
    color: var(--g2cp-button-color-active);
}