.hello-bar {
    box-sizing: border-box;
    font-size: 90%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1000;
    transform: translateY(-100%);
    opacity: 0;
}

.hello-bar.hello-bar.hello-bar--is-bottom {
    top: auto;
    transform: translateY(100%);
    bottom: 0;
}

.hello-bar.hello-bar.hello-bar--is-visible {
    transform: translateY(0);
    opacity: 1;
}

.hello-bar .hello-bar-container {
    overflow-y: hidden;
    margin-right: 1.5rem;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 2rem;
}

.hello-bar p.hello-bar-text {
    margin: 0 auto;
    text-align: inherit;
    max-width: 100%;
    line-height: 1;
    white-space: nowrap;
}

.hello-bar p.hello-bar-text .cta {
    text-decoration: none;
    appearance: none;
    background: none;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    border: none;
    padding: 0.3rem 1rem;
    border: 0.3rem solid;
    border-radius: 10rem;
    font: inherit;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1;
    margin-left: 0.5rem;
}

.hello-bar a {
    color: inherit;
    font-weight: bold;
}
.hello-bar .hello-bar-text--after {
    position: absolute;
    right: 0;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 3rem;
}

.hello-bar.hello-bar--is-fixed {
    position: fixed;
}

.hello-bar button.hello-bar-button {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    line-height: 1;
    appearance: none;
    background: none;
    border: none;
    padding: 0 0.75rem;
    margin: 0;
    width: auto;
    color: inherit;
}
.hello-bar button.hello-bar-button svg {
    height: 1rem;
}

.hello-bar.hello-bar--size-large {
    font-size: 120%;
}
.hello-bar.hello-bar--size-large .hello-bar-container {
    height: 4rem;
}
.hello-bar.hello-bar--size-large p.hello-bar-text .cta {
    padding: 0.75rem 1.25rem;
    border: 0.5rem solid;
    margin-left: 0.5rem;
}
.hello-bar.hello-bar--size-large p.hello-bar-text .cta.wiggle {
    animation: hello-bar-wiggle 5s infinite;
}

.hello-bar.hello-bar--size-large button.hello-bar-button svg {
    height: 1.33rem;
}

.hello-bar.hello-bar--is-multiline .hello-bar-container {
    height: auto;
    padding: 0.5rem 0;
}
.hello-bar.hello-bar--is-multiline p.hello-bar-text {
    white-space: normal;
    line-height: inherit;
}

@keyframes hello-bar-wiggle {
    2% { transform: translateX(3px) rotate(2deg); }
    4% { transform: translateX(-3px) rotate(-2deg); }
    6% { transform: translateX(3px) rotate(2deg); }
    8% { transform: translateX(-3px) rotate(-2deg); }
    10% { transform: translateX(2px) rotate(1deg); }
    12% { transform: translateX(-2px) rotate(-1deg); }
    14% { transform: translateX(2px) rotate(1deg); }
    16% { transform: translateX(-2px) rotate(-1deg); }
    18% { transform: translateX(1px) rotate(0); }
    20% { transform: translateX(-1px) rotate(0); }
}