/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.fsd-sb-info-banner {
    /*position: fixed;*/
    left: 0;
    width: 100%;
    z-index: 99999;
    position: var(--fsd-sb-position);
    /*background: var(--fsd-sb-background-colour);*/
    border-radius: var(--fsd-sb-border-radius);
    border-width: var(--fsd-sb-border-width);
    border-color: var(--fsd-sb-border-colour);
    background: var(--fsd-sb-background-colour);


    .fsd-sb-info-banner__wrapper {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        column-gap: 20px;
        row-gap: 10px;
        padding: var(--fsd-sb-padding)  calc(22px + var(--fsd-sb-close-button-size)) var(--fsd-sb-padding) 20px;

    }
    .fsd-sb-info-banner__close {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
        color: inherit;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        outline: inherit;
    }
    .fsd-sb-info-banner__wysiwyg p {
        margin: 0;
        color: var(--fsd-sb-wysiwyg-colour);
        font-size: var(--fsd-sb-wysiwyg-font-size);

    }
    .fsd-sb-info-banner__wysiwyg a {
        transition-duration: 300ms;
        color: var(--fsd-sb-wysiwyg-link-colour);
        text-decoration: none;
    }
    .fsd-sb-info-banner__wysiwyg a:hover {
        color: var(--fsd-sb-wysiwyg-link-colour-hover);
    }
    .fsd-sb-info-banner__cta {
        display: block;
        background: var(--fsd-sb-cta-colour) ;
        padding: var(--fsd-sb-cta-padding);
        border: var(--fsd-sb-cta-border-width) solid var(--fsd-sb-cta-border-colour);
        border-radius: var(--fsd-sb-cta-border-radius);
        text-decoration: none;
        color: var(--fsd-sb-cta-text-colour);
        font-size: var(--fsd-sb-cta-font-size);
        line-height: 1;
        transition-duration: 300ms;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .fsd-sb-info-banner__cta:hover {
        background: var(--fsd-sb-cta-background-hover) ;
        border-color: var(--fsd-sb-cta-border-colour-hover);
        color: var(--fsd-sb-cta-text-colour-hover);
    }
}

.fsd-sb-info-banner--top {
    top: 0;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;

}
.fsd-sb-info-banner--bottom {
    bottom: 0;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.info-banner--shadow {
    -webkit-box-shadow: 0px 0px 24px 2px rgba(66, 68, 90, 0.1);
    -moz-box-shadow: 0px 0px 24px 2px rgba(66, 68, 90, 0.1);
    box-shadow: 0px 0px 24px 2px rgba(66, 68, 90, 0.1);
}
.fsd-sb-info-banner {
    transition-duration: 300ms;
}
.fsd-sb-info-banner--top.fsd-sb-info-banner--hidden{
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.fsd-sb-info-banner--bottom.fsd-sb-info-banner--hidden{
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}