@layer components {

    .vote {
        --award-gold: rgb(174 137 80);
        --award-gold-hover: rgb(190 151 92);
        --award-gold-text: rgb(20 14 4);
        display: grid;
        gap: var(--space-28);
        padding-block: var(--space-32) calc(var(--space-96) + var(--space-32));
    }

    .vote-list {
        display: grid;
        gap: var(--space-20);
    }

    .vote-header {
        display: grid;
        gap: var(--space-8);
        margin-bottom: 0;
        padding-bottom: var(--space-16);
        border-bottom: var(--border-width-hairline) solid var(--color-border);
    }

    .vote-header h1 {
        color: var(--color-text);
        font-size: clamp(var(--text-2xl), 4vw, 3rem);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-tight);
    }

    .vote-header p {
        max-width: 48rem;
        color: var(--color-text-muted);
        font-size: var(--text-base);
        line-height: var(--leading-normal);
    }

    .vote-header .maxed-out {
        color: var(--award-gold);
        font-weight: var(--font-weight-bold);
    }

    .vote-list-games {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
        gap: var(--space-16);
    }

    .vote-list-game {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-16);
        min-width: 0;
        padding: var(--space-12);
        border: var(--border-width-hairline) solid color-mix(in oklch, var(--color-border) 72%, transparent);
        border-radius: var(--radius-corner);
        background-color: var(--color-bg-surface);
        box-shadow: 0 .5rem 1.25rem color-mix(in oklch, var(--color-black) 6%, transparent);
        cursor: pointer;
        transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .vote-list-game:hover,
    .vote-list-game:focus-within {
        border-color: color-mix(in oklch, var(--award-gold) 65%, var(--color-border));
        box-shadow: 0 .75rem 1.5rem color-mix(in oklch, var(--color-black) 8%, transparent);
        transform: translateY(-.0625rem);
    }

    .vote-list-games .vote-list-game.choice,
    .voted-list-games .vote-list-game.choice {
        border-color: var(--award-gold);
        background: color-mix(in oklch, var(--award-gold) 10%, var(--color-bg-surface));
    }

    .vote-list-nummer-left {
        display: grid;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        align-items: center;
        gap: var(--space-12);
        min-width: 0;
    }

    .vote-list-game .packshot.small {
        display: block;
        width: 5.5rem;
        height: 5.5rem;
        border-radius: var(--radius-corner-m);
        object-fit: cover;
        box-shadow: 0 .25rem .75rem color-mix(in oklch, var(--color-black) 10%, transparent);
    }

    .vote-game-information {
        display: grid;
        gap: var(--space-4);
        min-width: 0;
    }

    .vote-game-information > .fw-bold {
        overflow-wrap: anywhere;
        color: var(--color-text);
        font-size: var(--text-lg);
        line-height: var(--leading-tight);
    }

    .vote-game-information > span:last-child {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    .vote-game-information-platforms {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .vote-list-game__check-control {
        display: grid;
        place-items: center;
        flex: 0 0 var(--space-24);
        width: var(--space-24);
        height: var(--space-24);
        align-self: center;
    }

    .vote-list-game input[type="checkbox"] {
        grid-area: 1 / 1;
        flex: 0 0 var(--space-24);
        margin: 0;
        border-color: var(--award-gold);
        border-radius: var(--radius-corner-m);
        color: var(--award-gold-text);
    }

    .vote-list-game__check-icon {
        position: static;
        grid-area: 1 / 1;
        z-index: 6;
        display: none;
        width: 1rem;
        height: 1rem;
        overflow: visible;
        color: var(--color-white);
        fill: currentColor;
        pointer-events: none;
    }

    .voted-list-games input[type="checkbox"]:checked,
    .voted-list-games input[type="checkbox"]:checked:disabled,
    .vote-list-games input[type="checkbox"]:checked,
    .vote-list-games input[type="checkbox"]:checked:disabled {
        border-color: var(--award-gold);
        background: var(--award-gold);
        color: var(--color-white);
    }

    .voted-list-games .vote-list-game:hover input[type="checkbox"]:not(:disabled),
    .voted-list-games .vote-list-game:focus-within input[type="checkbox"]:not(:disabled),
    .vote-list-games .vote-list-game:hover input[type="checkbox"]:not(:disabled),
    .vote-list-games .vote-list-game:focus-within input[type="checkbox"]:not(:disabled) {
        border-color: var(--award-gold);
        background: var(--award-gold);
        color: var(--color-white);
    }

    .voted-list-games input[type="checkbox"]:checked::before,
    .vote-list-games input[type="checkbox"]:checked::before {
        content: none;
    }

    .voted-list-games input[type="checkbox"]:checked + .vote-list-game__check-icon,
    .vote-list-games input[type="checkbox"]:checked + .vote-list-game__check-icon,
    .voted-list-games .vote-list-game:hover input[type="checkbox"]:not(:disabled) + .vote-list-game__check-icon,
    .voted-list-games .vote-list-game:focus-within input[type="checkbox"]:not(:disabled) + .vote-list-game__check-icon,
    .vote-list-games .vote-list-game:hover input[type="checkbox"]:not(:disabled) + .vote-list-game__check-icon,
    .vote-list-games .vote-list-game:focus-within input[type="checkbox"]:not(:disabled) + .vote-list-game__check-icon {
        display: block;
    }

    .voted-list-games input[type="checkbox"]:checked::after,
    .vote-list-games input[type="checkbox"]:checked::after {
        background-color: var(--award-gold);
    }

    .vote-list-games .vote-list-game.vote-list-winnaar,
    .voted-list-games .vote-list-game.vote-list-winnaar {
        padding: var(--space-16);
        border-color: color-mix(in oklch, var(--award-gold) 68%, transparent);
        border-radius: var(--radius-corner);
        background: var(--color-black);
        color: var(--award-gold);
    }

    .vote-list-games .vote-list-game.vote-list-winnaar:nth-child(even),
    .voted-list-games .vote-list-game.vote-list-winnaar:nth-child(even) {
        background: var(--color-black);
    }

    .vote-list-games .vote-list-game.vote-list-winnaar .vote-game-information > .fw-bold,
    .voted-list-games .vote-list-game.vote-list-winnaar .vote-game-information > .fw-bold {
        color: var(--award-gold);
        font-size: var(--text-xl);
    }

    .vote-list-games .vote-list-game.vote-list-winnaar .vote-game-information > span,
    .vote-list-games .vote-list-game.vote-list-winnaar .vote-game-information > span:last-child,
    .voted-list-games .vote-list-game.vote-list-winnaar .vote-game-information > span,
    .voted-list-games .vote-list-game.vote-list-winnaar .vote-game-information > span:last-child {
        color: var(--award-gold);
    }

    .vote-list-games .vote-list-game.vote-list-winnaar .packshot.small,
    .voted-list-games .vote-list-game.vote-list-winnaar .packshot.small {
        border: 2px solid var(--award-gold);
    }

    .vote-list-games .vote-list-game.vote-list-winnaar input[type="checkbox"],
    .vote-list-games .vote-list-game.vote-list-winnaar input[type="checkbox"]:checked,
    .vote-list-games .vote-list-game.vote-list-winnaar input[type="checkbox"]:checked:disabled,
    .voted-list-games .vote-list-game.vote-list-winnaar input[type="checkbox"],
    .voted-list-games .vote-list-game.vote-list-winnaar input[type="checkbox"]:checked,
    .voted-list-games .vote-list-game.vote-list-winnaar input[type="checkbox"]:checked:disabled {
        border-color: var(--award-gold);
        background: var(--award-gold);
        color: var(--color-white);
    }

    .vote-list-games .vote-list-game.vote-list-winnaar .vote-list-game__check-icon,
    .voted-list-games .vote-list-game.vote-list-winnaar .vote-list-game__check-icon {
        display: block;
        width: 1rem;
        height: 1rem;
    }

    .voted-list {
        display: none;
    }

    .voted-list.show {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1200;
        display: block;
        width: 100%;
        padding-block: var(--space-20);
        border-top: var(--border-width-hairline) solid color-mix(in oklch, var(--color-border) 72%, transparent);
        background-color: color-mix(in oklch, var(--color-bg-surface) 88%, var(--color-bg));
        box-shadow: 0 -1rem 2.5rem color-mix(in oklch, var(--color-black) 10%, transparent);
    }

    .voted-list-wrapper {
        display: none;
    }

    .voted-list-wrapper.show {
        display: block;
        margin-bottom: var(--space-20);
    }

    .voted-list-wrapper form.collapsed {
        display: none;
    }

    .voted-list-wrapper .voted-header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-12);
        margin-bottom: var(--space-20);
        padding-right: 9rem;
        padding-bottom: var(--space-12);
        border-bottom: var(--border-width-hairline) solid var(--color-border);
    }

    .voted-list-wrapper .voted-header.collapsed {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .voted-header h2 {
        color: var(--color-text);
        font-size: var(--text-xl);
        line-height: var(--leading-tight);
    }

    .voted-header .btn {
        position: absolute;
        right: 0;
    }

    .voted-list-games {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-12);
        margin-bottom: var(--space-20);
    }

    .voted-list-games .vote-list-game {
        margin: 0;
        padding: var(--space-8);
        box-shadow: none;
    }

    .voted-list-games .voted-list-placeholder {
        border-style: dashed;
        border-color: color-mix(in oklch, var(--award-gold) 42%, var(--color-border));
        background: color-mix(in oklch, var(--award-gold) 5%, var(--color-bg-surface));
        color: var(--color-text-muted);
        cursor: default;
    }

    .voted-list-games .voted-list-placeholder:hover,
    .voted-list-games .voted-list-placeholder:focus-within {
        border-color: color-mix(in oklch, var(--award-gold) 42%, var(--color-border));
        box-shadow: none;
        transform: none;
    }

    .voted-list-placeholder__packshot {
        display: grid;
        place-items: center;
        border: var(--border-width-hairline) dashed color-mix(in oklch, var(--award-gold) 55%, var(--color-border));
        background: color-mix(in oklch, var(--award-gold) 8%, var(--color-bg));
    }

    .voted-list-placeholder__packshot::before {
        content: "+";
        color: var(--award-gold);
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-bold);
        line-height: 1;
    }

    .voted-list-games .voted-list-placeholder .vote-game-information > .fw-bold {
        color: color-mix(in oklch, var(--award-gold) 72%, var(--color-text));
        font-size: var(--text-base);
    }

    .voted-list-games .voted-list-placeholder .vote-game-information > span:last-child {
        color: var(--color-text-muted);
    }

    .voted-list-games .vote-list-nummer-left {
        grid-template-columns: var(--space-56) minmax(0, 1fr);
    }

    .voted-list-games .vote-list-game:hover,
    .voted-list-games .vote-list-game:focus-within {
        transform: none;
    }

    .voted-list-games .packshot.small {
        width: var(--space-56);
        height: var(--space-56);
    }

    .voted-list-nummer-left {
        display: flex;
        align-items: center;
        gap: var(--space-20);
    }

    .voted-game-information {
        display: grid;
        width: 100%;
    }

    .vote-action-button {
        min-height: 2.5rem;
        height: 2.5rem;
        border-color: var(--award-gold);
        border-radius: var(--radius-corner);
        background: var(--award-gold);
        color: var(--award-gold-text);
        font-weight: var(--font-weight-bold);
    }

    .vote-action-button__icon {
        position: static;
        display: block;
        width: var(--space-14);
        height: var(--space-14);
        overflow: visible;
        fill: currentColor;
        transform-origin: center;
        transition: transform .18s ease;
    }

    .vote-action-button[aria-expanded="true"] .vote-action-button__icon {
        transform: rotate(180deg);
    }

    .vote-action-button:hover,
    .vote-action-button:focus-visible {
        border-color: var(--award-gold-hover);
        background: var(--award-gold-hover);
        color: var(--award-gold-text);
    }

    .vote-action-button:disabled {
        border-color: var(--btn-disabled-border);
        background: var(--btn-disabled-bg);
        color: var(--btn-disabled-text);
    }

    .voted-send {
        display: none;
    }

    .voted-send.show {
        display: block;
        margin-top: var(--space-20);
    }

    .voted-list.collapsed .voted-list-games,
    .voted-list.collapsed .btn.btn--secondary {
        display: none;
    }

    .voted-list.collapsed {
        padding-bottom: var(--space-10);
    }

    @media (max-width: 1024px) {
        .voted-list-games {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 720px) {
        .vote {
            padding-block: var(--space-24) calc(var(--space-96) + var(--space-48));
        }

        .vote-list-games {
            grid-template-columns: 1fr;
        }

        .voted-list-games {
            grid-template-columns: 1fr;
        }

        .vote-list-game {
            align-items: flex-start;
        }

        .vote-list-nummer-left {
            grid-template-columns: var(--space-80) minmax(0, 1fr);
        }

        .vote-list-game .packshot.small {
            width: var(--space-80);
            height: var(--space-80);
        }

        .voted-list-wrapper .voted-header {
            padding-right: 0;
        }

        .voted-header .btn {
            position: static;
        }

        .voted-list-games .vote-list-nummer-left {
            grid-template-columns: var(--space-56) minmax(0, 1fr);
        }

        .voted-list-games .packshot.small {
            width: var(--space-56);
            height: var(--space-56);
        }

        .vote-action-button {
            width: 100%;
        }
    }
}