@use '../../../../../styles/mixins';

.ydb-healthcheck-preview {
    $block: &;
    border-radius: var(--g-border-radius-s);

    &__skeleton {
        width: 100%;
        height: 62px;
    }

    &__alert-message {
        height: 30px;
    }

    &__compact-status_emergency {
        @include mixins.danger-heavy-label();

        #{$block}__icon_emergency {
            color: inherit;
        }
    }

    &__icon {
        display: flex;

        height: 100%;
        margin: auto;

        &_good {
            color: var(--g-color-text-positive);
        }
        &_degraded {
            color: var(--g-color-text-warning-heavy);
        }
        &_emergency {
            color: var(--g-color-text-danger);
        }
        &_unspecified {
            color: var(--g-color-text-misc);
        }
        &_maintenance_required {
            color: var(--g-color-text-danger);
        }
    }
}