.sticky-bar {
    display: none;
    position: relative;
    z-index: 10;
    color: var(--sticky-bar-color, #FFFFFF);
    background-color: var(--sticky-bar-background, #45080D);

    &.active {
        display: block;
    }

    &.sticky-bar--pinned {
        position: sticky;
        top: 0;
    }

    .sticky-bar__wrap {
        display: flex;
        align-items: center;
        column-gap: 12px;
        min-height: 48px;
        padding: 6px 0;
    }

    .sticky-bar__content {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 16px;
    }

    .sticky-bar__text {
        color: inherit;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0.14px;
    }

    .sticky-bar__text--mobile {
        display: none;
    }

    .sticky-bar__button {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 6px 14px;
        border-radius: 8px;
        color: var(--sticky-bar-button-color, #45080D);
        background-color: var(--sticky-bar-button-background, #FFFFFF);
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: 0.36px;
        text-transform: uppercase;
        white-space: nowrap;
        transition: color .3s ease, background-color .3s ease;

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                color: var(--sticky-bar-button-hover-color, #FFFFFF);
                background-color: var(--sticky-bar-button-hover-background, #171717);
            }
        }
    }

    .sticky-bar__close {
        flex: 0 0 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        fill: var(--sticky-bar-close-color, #FFFFFF);
        cursor: pointer;
        transition: opacity .3s ease;

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                opacity: .7;
            }
        }
    }

    &.sticky-bar--center.sticky-bar--closable .sticky-bar__wrap:before {
        content: "";
        flex: 0 0 32px;
    }

    &.sticky-bar--start .sticky-bar__content {
        justify-content: flex-start;
    }

    &.sticky-bar--between .sticky-bar__content {
        justify-content: space-between;
    }

    @media (min-width: 768px) {
        &.sticky-bar--hide-desktop {
            display: none;
        }
    }

    @media (max-width: 767px) {
        &.sticky-bar--hide-mobile {
            display: none;
        }

        .sticky-bar__wrap {
            column-gap: 8px;
            min-height: 44px;
        }

        .sticky-bar__content {
            column-gap: 12px;
        }

        .sticky-bar__text {
            font-size: 13px;
            letter-spacing: 0.13px;
        }

        .sticky-bar__text--desktop {
            display: none;
        }

        .sticky-bar__text--mobile {
            display: block;
        }

        .sticky-bar__button {
            min-height: 30px;
            padding: 6px 12px;
            font-size: 11px;
            letter-spacing: 0.33px;
        }

        &.sticky-bar--center.sticky-bar--closable .sticky-bar__wrap:before {
            display: none;
        }
    }
}

body.megamenu-open {
    .sticky-bar {
        z-index: 11;
    }
}

@media (max-width: 992px) {
    .sticky-bar.sticky-bar--pinned.active ~ .header {
        top: var(--sticky-bar-height, 44px);
    }
}