.notice-wrapper{
    position: fixed;
    top: max(1.5rem, calc(1.5 * var(--su)));
    left: 50%;
    translate: -50%;
    max-width: calc(100% - max(2rem, calc(2 * var(--su))));
    margin-inline: max(1rem, var(--su));
}
.notice-wrapper .notice{
    position: relative;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    width: max(20rem, calc(20 * var(--su)));
    max-width: 100%;
    background: #fff;
    border-radius: max(.25rem, calc(.25 * var(--su)));
    padding-top: max(.5rem, calc(.5 * var(--su)));
    padding-bottom: max(.5rem, calc(.5 * var(--su)));
    padding-right: max(1rem, var(--su));
    padding-left: max(1rem, var(--su));
}
.notice-wrapper .notice.is-dismissing{
    opacity: 0;
}
.notice-wrapper .notice button{
    position: absolute;
    background: none;
    padding: 0;
    outline: none;
    border: none;
    top: max(.5rem, calc(.5 * var(--su)));
    right: max(.5rem, calc(.5 * var(--su)));
    cursor: pointer;
}
.notice-wrapper .notice button svg{
    width: max(.75rem, calc(.75 * var(--su)));
    height: auto;
    pointer-events: none;
}