.status-page {
    margin-inline: auto;
}

.status-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.status-page-header h1,
.status-page-header p,
.status-overall h2,
.status-overall p {
    margin: 0;
}

.status-page-header p,
.status-overall p,
.status-component-description,
.status-event-meta,
.status-empty {
    color: var(--site-muted);
}

.status-page-loading {
    display: block;
}

.status-skeleton {
    display: block;
    overflow: hidden;
    border-radius: 0.45rem;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--site-border) 70%, transparent),
        color-mix(in srgb, var(--site-muted) 18%, transparent),
        color-mix(in srgb, var(--site-border) 70%, transparent)
    );
    background-size: 220% 100%;
    animation: status-skeleton-pulse 1.35s ease-in-out infinite;
}

.status-skeleton-overall {
    margin-bottom: 2rem;
}

.status-skeleton-copy {
    width: min(100%, 28rem);
}

.status-skeleton-dot {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border-radius: 999px;
}

.status-skeleton-line {
    width: 100%;
    height: 1rem;
}

.status-skeleton-line + .status-skeleton-line {
    margin-top: 0.75rem;
}

.status-skeleton-line-lg {
    width: min(100%, 18rem);
    height: 1.25rem;
}

.status-skeleton-line-sm {
    width: min(72%, 12rem);
}

.status-skeleton-heading {
    width: 11rem;
    height: 1.25rem;
    margin-bottom: 1rem;
}

.status-skeleton-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem;
    gap: 1rem;
    align-items: center;
}

.status-skeleton-pill {
    width: 8rem;
    height: 1.25rem;
    justify-self: end;
    border-radius: 999px;
}

.status-skeleton-event {
    display: block;
}

@keyframes status-skeleton-pulse {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

.status-overall {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--site-border);
    border-radius: 1rem;
    background: var(--site-surface);
}

.status-dot {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--aw-warning);
}

.status-dot.is-operational {
    background: var(--aw-success);
}

.status-dot.is-disrupted {
    background: var(--aw-danger);
}

.status-component-status.is-operational {
    color: var(--site-success-text);
}

.status-component-status.is-disrupted {
    color: var(--site-danger-text);
}

.status-section {
    margin-top: 2rem;
}

.status-section > h2 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.status-components,
.status-events {
    overflow: hidden;
    border: 1px solid var(--site-border);
    border-radius: 1rem;
    background: var(--site-surface);
}

.status-component,
.status-event {
    padding: 1rem 1.25rem;
}

.status-component + .status-component,
.status-event + .status-event {
    border-top: 1px solid var(--site-border);
}

.status-component-header,
.status-event-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.status-component-name,
.status-event-title {
    margin: 0;
    font-size: 1rem;
}

.status-component-status,
.status-event-type {
    flex: 0 0 auto;
    font-weight: 600;
}

.status-component-description,
.status-event-meta {
    font-size: 0.875rem;
}

.status-component-description {
    margin-top: 0.4rem;
}

.status-component-description > :first-child {
    margin-top: 0;
}

.status-component-description > :last-child {
    margin-bottom: 0;
}

.status-event-meta {
    margin: 0.4rem 0 0;
}

.status-event-content {
    margin-top: 0.75rem;
}

.status-event-content > :last-child {
    margin-bottom: 0;
}

@media (max-width: 36rem) {
    .status-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .status-page-header .btn {
        align-self: flex-start;
    }

    .status-skeleton-row {
        grid-template-columns: 1fr;
    }

    .status-skeleton-pill {
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-skeleton {
        animation: none;
    }
}