.cookie-banner {
    --rocket-ui-cookie-banner-background-color: var(--rocket-color-primary-400);
    --rocket-ui-cookie-banner-text-color: var(--rocket-color-grey-100);
    --rocket-ui-cookie-banner-link-color: var(--rocket-color-white-base);

    @include transition;

    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    padding: $rocket-spacing-size-4 0;
    color: var(--rocket-ui-cookie-banner-text-color);
    line-height: 1.5;
    background-color: var(--rocket-ui-cookie-banner-background-color);
    transform: translateY(100%);
    visibility: hidden;
    opacity: 0;

    &__content-container {
        @extend .container;

        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;

        @include breakpoint(md) {
            justify-content: space-between;
        }
    }

    &__text {
        @include breakpoint(md) {
            flex-grow: 1;
            width: 1%;
        }
    }

    &__actions {
        display: flex;
        align-items: center;
        column-gap: $rocket-spacing-size-2;
    }

    &--is-open {
        transform: translateY(0%);
        visibility: visible;
        opacity: 1;
    }
}