#cookie-banner {
    box-sizing: border-box;
    position: fixed;
    right: calc((100vw - var(--the-width)) / 2);
    bottom: var(--space-md);
    z-index: 1200;
    width: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--grid-gap);
    align-items: start;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--space-xs);
    background: var(--jet-black);
    border: var(--silver);
    align-items: center;
    box-shadow: var(--shadow-l);
    color: var(--the-white);
    transition: opacity 0.3s var(--out), color 0.3s var(--out), background-color 0.3s var(--out);
    pointer-events: auto;
    text-wrap: balance;

    > div {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        flex-shrink: 0;
    }

    .cookie-banner-link,
    .cookie-accept-btn {
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--space-xs);
        font-size: var(--fs-xs);
        text-decoration: none;
        transition: opacity 0.3s var(--out), color 0.3s var(--out), background-color 0.3s var(--out);
    }

    .cookie-banner-link {
        border: 1px solid var(--silver);
        color: var(--the-white);
        background: transparent;
        border-radius: var(--space-xxs);

        &:hover {
            background: var(--the-white);
            color: var(--jet-black);
        }
    }

    .cookie-accept-btn {
        border: 1px solid var(--yellow);
        background: var(--yellow);
        color: var(--jet-black);
        cursor: pointer;
        border-radius: var(--space-xxs);

        &:hover {
            background: var(--brighter-yellow);
            border-color: var(--brighter-yellow);
        }
    }
}

@media (max-width: 48rem) {
    #cookie-banner {
        right: var(--space-xs);
        bottom: var(--space-sm);
        width: calc(100% - var(--space-xs) * 2);
        grid-template-columns: 1fr;
        padding: var(--space-sm);
        font-size: var(--fs-sm);

        > div {
            width: 100%;
            justify-content: flex-end;
        }
    }
}