.notice--hidden {
    display: var(--notice-display, none);
}
.notice__container {
    background: var(--notice__container-bg, rgba(0,0,0,.8));
    display: var(--notice__container-display, block);
    justify-content: var(--notice__container-justify, center);
    padding: var(--notice__container-p, 0 1rem 0 1.5rem);
    animation-duration: var(--components-default-duration-slow);
    animation-name: slidein;
    overflow: hidden;
}
.notice__message {
    width: var(--notice__message-w, 100%);
}
.notice__container.notice--loaded {
    max-height: 200px;
}
.notice__container.notice--hiding {
    animation-duration: var(--components-default-duration-slow);
    animation-name: slideout;
    max-height: 0;
}

.notice__inner {
    padding: var(--notice__inner-p, 1rem 0);
    margin: var(--notice__inner-m, 0 auto);
    display: var(--notice__inner-display, flex);
    width: var(--notice__inner-w, 100%);
    max-width: var(--notice__inner-max-w, 100%);
    font-size: var(--notice__inner-font-size, 1rem);
    color: var(--notice__inner-text, #fff);
    animation-duration: var(--components-default-duration-slow);
    animation-name: fadeIn;
}
.notice__icon, .notice__button {
    transition: all;
    transition-duration: var(--notice__button-duration, var(--components-default-duration));
    transition-timing-function:  var(--notice__button-ease, var(--components-default-ease));
}

.notice__icon {
    width: var(--notice__icon-w, 1.4rem);
    height: var(--notice__icon-h, 1.4rem);
    color: var(--notice__icon-text, #fff);
    fill: currentColor;

}
.notice__button {
    color: var(--notice__button-text, #fff);
    margin: var(--notice__button-m, 0 0 0 auto);
    background: var(--notice__button-bg, transparent);
    padding: var(--notice__button-p, 0);
}
.notice__button:hover .notice__icon {
    transform: rotate(var(--notice__button-rotate, -90deg));
}

@keyframes slidein {
    from {
        max-height: 0;
    }

    to {
        max-height: 200px;
    }
}
@keyframes slideout {
    from {
        max-height: 200px;
        opacity: 1;
    }

    to {
        max-height: 0;
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}