.vivagym-top-bar {
    --animation-duration : 8s;

    position       : sticky;
    overflow       : hidden;
    z-index        : -1;
    cursor         : pointer;
    padding-inline : 2rem;
    padding-block  : 24px 20px;
    min-height     : 42px;
    display        : flex;
    align-items    : center;
    font-family    : var(--heading-font);
    font-size      : 20px;
    line-height    : 20px;
    font-weight    : 600;
    text-transform : uppercase;
}

.vivagym-top-bar p {
    margin-block: 0;
}

.vivagym-top-bar-content {
    display         : flex;
    gap             : 56px;
    align-items     : center;
    width           : 100%;
    max-width       : var( --wp--custom--width--default );
    margin-inline   : auto;
    justify-content : center;
    padding-right   : 56px;
}


.vivagym-top-bar-countdown {
    display     : flex;
    gap         : 10px;
    white-space : nowrap;
    span {
        text-align : right;
        min-width  : 42px;
    }
}

.vivagym-top-bar .vivagym-top-bar-content-text {
    position    : relative;
    white-space : nowrap;
    color       : var(--wp--preset--color--title);
}


.vivagym-top-bar__track {
    display: flex;
}
.vivagym-top-bar__track[data-animated=true] {
	animation: scroll var(--animation-duration) linear infinite;
}

.vivagym-top-bar .vivagym-top-bar-content-text:before,
.vivagym-top-bar .vivagym-top-bar-content-text:after {
    content    : '';
    background : var(--icon-asterisk);
    width      : 18px;
    height     : 18px;
    position   : absolute;
}
.vivagym-top-bar .vivagym-top-bar-content-text:before {
	inset: 0 auto auto -36px;
}
.vivagym-top-bar .vivagym-top-bar-content-text:after {
	inset: 0 -36px auto auto;
}

.vivagym-top-bar--theme-primary {
    background-color : var(--wp--preset--color--primary);
    color            : white;
}
.vivagym-top-bar--theme-primary .vivagym-top-bar-content-text {
	color : var(--wp--preset--color--title);
}

.vivagym-top-bar--theme-secondary {
	background-color : var(--wp--preset--color--secondary);
	color           : white;
}
.vivagym-top-bar--theme-secondary .vivagym-top-bar-content-text {
	color : var(--wp--preset--color--title);
}

.vivagym-top-bar--theme-tertiary-blue {
	background-color : var(--wp--preset--color--tertiary-blue);
	color           : var(--wp--preset--color--title);
}
.vivagym-top-bar--theme-tertiary-blue .vivagym-top-bar-content-text {
	color : var(--wp--preset--color--title);
}
.vivagym-top-bar--theme-tertiary-blue .vivagym-top-bar-content-text:before,
.vivagym-top-bar--theme-tertiary-blue .vivagym-top-bar-content-text:after {
    background : var(--icon-asterisk-primary);
}
.vivagym-top-bar .vivagym-top-bar-content-text:before, .vivagym-top-bar .vivagym-top-bar-content-text:after

.vivagym-top-bar--theme-white {
	background-color : white;
}
.vivagym-top-bar--theme-white .vivagym-top-bar-countdown {
    color            : var(--wp--preset--color--primary);
}
.vivagym-top-bar--theme-white .vivagym-top-bar-content-text {
	color : var(--wp--preset--color--title);
}

.vivagym-top-bar--theme-black {
	background-color : black;
    color            : var(--wp--preset--color--primary);
}
.vivagym-top-bar--theme-black .vivagym-top-bar-content-text {
	color : white;
}

.site-header.site-header--has-top-bar {
    border-bottom: 0;
}

@keyframes scroll {
	0%   { transform: translateX( 0 ); }
	100% { transform: translateX( var(--max-translate-width) ); }
}