.notice {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--comat--radius--s);
    line-height: 1.4;
    padding: 1rem 3rem 1rem 3.5rem;
    position: relative;
    transition: background-color .5s linear, border-color .5s linear;
}

.notice + .notice { margin-top: 1rem; }

.notice::before {
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    height: 1.65rem;
    left: 1rem;
    margin-top: -0.825rem;
    position: absolute;
    top: 50%;
    width: 1.65rem;
}

.notice.is-success {
  background-color: var(--comat--color--success-bg);
  border-color: var(--comat--color--success);
}

.notice.is-success::before { background-image: url( '../img/icon-notice-success.svg' ); }

.notice.is-warning {
  background-color: var(--comat--color--warning-bg);
  border-color: var(--comat--color--warning);
}


.notice.is-warning::before { background-image: url( '../img/icon-notice-warning.svg' ); }

.notice.is-error {
  background-color: var(--comat--color--error-bg);
  border-color: var(--comat--color--error);
}

.notice.is-error::before { background-image: url( '../img/icon-notice-error.svg' ); }


/* Loading... */

.notice .lds-ring { display: none }

.notice.is-loading {
    align-items: center;
    background-color: var(--comat--color--tertiary-04);
    border-color: var(--comat--color--primary-03); 
    display: flex;
    gap: 1rem;
    padding-left: 1rem;
    width: 100%;
}

.notice.is-loading::before { transform: scale(0.5) }

.notice.is-loading .lds-ring { display: inline-block }

.notice .notice-dismiss {
    background: none;
    background-image: url( '../img/icon-close.svg' );
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid transparent;
    cursor: pointer;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .25s ease;
    width: 3rem;
}

.notice .notice-dismiss:hover { opacity: 0.5; }