/**
 * Notices — refined system
 */

.hemik-notice {
    --hemik-notice-accent: var(--hemik-color-brand);
    --hemik-notice-background: var(--hemik-color-brand-subtle);

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--hemik-space-4);
    padding: var(--hemik-space-5);
    overflow: hidden;
    border: 1px solid rgb(109 40 217 / 0.10);
    border-radius: var(--hemik-radius-lg);
    background: var(--hemik-notice-background);
}

.hemik-notice::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgb(255 255 255 / 0.34),
            transparent 42%
        );
    content: "";
    pointer-events: none;
}

.hemik-notice__marker,
.hemik-notice__body {
    position: relative;
    z-index: 1;
}

.hemik-notice__marker {
    width: 0.28rem;
    min-height: 100%;
    border-radius: var(--hemik-radius-pill);
    background: var(--hemik-notice-accent);
}

.hemik-notice__title {
    color: var(--hemik-color-text);
    font-size: var(--hemik-font-size-base);
    font-weight: var(--hemik-font-weight-semibold);
}

.hemik-notice__content {
    margin-block-start: var(--hemik-space-2);
    color: var(--hemik-color-text-soft);
    line-height: 1.7;
}

.hemik-notice__content > * + * {
    margin-block-start: var(--hemik-space-3);
}

.hemik-notice--success {
    --hemik-notice-accent: var(--hemik-color-success);
    --hemik-notice-background: var(--hemik-color-success-soft);
}

.hemik-notice--warning {
    --hemik-notice-accent: var(--hemik-color-warning);
    --hemik-notice-background: var(--hemik-color-warning-soft);
}

.hemik-notice--danger {
    --hemik-notice-accent: var(--hemik-color-danger);
    --hemik-notice-background: var(--hemik-color-danger-soft);
}