@use "../mixins" as *;
@use "../media" as *;


.cookie-banner {
    z-index: 9999;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 1em auto;
    border-radius: var(--border-radius-30);
    border: 1px solid var(--color-accent-80);
    background-color: var(--color-light-80);
    backdrop-filter: var(--blur-10);
    max-width: 730px;
    width: 45vw;
    padding: 1em 1.5em;

    opacity: 0;
    pointer-events: none;
    transform: translateY(3em);
    transition: opacity var(--transition-duration-03),
                transform var(--transition-duration-02);
    
    &--visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity var(--transition-duration-02),
                    transform var(--transition-duration-03);
    }

    & h4,
    & p {
        transition: color var(--transition-duration-03),
                    background-color var(--transition-duration-03);
    }

    h4 {
        margin-block: 0 0.7em;
    }
    
    button + button {
        margin-left: 1em;
        
        @include mobile-s {
            margin-left: 0;
            margin-top: 1em;
        }
    }

    &__actions {
        @include mobile-s {
            display: flex;
            flex-direction: column;
        }
    }

    @include desktop {
        width: 65vw;
    }
    
    @include mobile {
        width: 85vw;
    }

    @include mobile-s {
        width: 95vw;
    }

}