/*
 * Notices, empty/loading states and native disclosure presentation.
 */

.bhw-alert {
    padding: var(--bhw-space-4);
    border: var(--bhw-border-thin) solid var(--bhw-color-border-strong);
    border-inline-start-width: 0.3rem;
    border-radius: var(--bhw-radius-medium);
    background: var(--bhw-color-background-secondary);
    color: var(--bhw-color-text-primary);
}

.bhw-alert h3,
.bhw-alert p {
    margin-block: 0;
}

.bhw-alert p {
    margin-block-start: var(--bhw-space-2);
}

.bhw-alert--info {
    border-inline-start-color: var(--bhw-color-accent);
}

.bhw-alert--success {
    border-inline-start-color: var(--bhw-color-success);
}

.bhw-alert--warning {
    border-inline-start-color: var(--bhw-color-warning);
}

.bhw-alert--error {
    border-inline-start-color: var(--bhw-color-error);
}

.bhw-state {
    display: grid;
    justify-items: start;
    gap: var(--bhw-space-3);
    padding: var(--bhw-layout-card-padding);
    border: var(--bhw-border-thin) dashed var(--bhw-color-border-strong);
    border-radius: var(--bhw-radius-large);
}

.bhw-state > * {
    margin: 0;
}

.bhw-state--loading {
    position: relative;
    padding-inline-start: calc(var(--bhw-layout-card-padding) + var(--bhw-space-6));
}

.bhw-state--loading::before {
    position: absolute;
    inset-block-start: var(--bhw-layout-card-padding);
    inset-inline-start: var(--bhw-layout-card-padding);
    width: var(--bhw-space-5);
    height: var(--bhw-space-5);
    border: var(--bhw-border-strong) solid var(--bhw-color-border-strong);
    border-inline-end-color: var(--bhw-color-accent);
    border-radius: 50%;
    content: "";
    animation: bhw-spin var(--bhw-motion-slow) linear infinite;
}

.bhw-disclosure {
    border: var(--bhw-border-thin) solid var(--bhw-color-border);
    border-radius: var(--bhw-radius-medium);
    background: var(--bhw-color-panel);
}

.bhw-disclosure summary {
    min-height: var(--bhw-control-min-size);
    padding: var(--bhw-space-4);
    font-weight: var(--bhw-weight-semibold);
    cursor: pointer;
}

.bhw-disclosure__content {
    padding: 0 var(--bhw-space-4) var(--bhw-space-4);
}

.bhw-disclosure__content > :last-child {
    margin-block-end: 0;
}