@import '~@gravity-ui/uikit/styles/mixins';

$monospaceFontFamily: 'Consolas', 'Menlo', 'Ubuntu Mono', monospace;

.datalens-chartkit-error {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 16px;
    overflow: auto;

    &__title {
        display: flex;
        align-items: center;
        color: var(--g-color-text-primary);
        font-size: 13px;
        line-height: 16px;
        margin-bottom: 12px;

        &_mobile {
            @include text-body-2;
        }
    }

    & &__icon {
        color: var(--g-color-text-danger);
        margin-right: 8px;
        flex-shrink: 0;

        &_no-data {
            color: var(--g-color-base-neutral-heavy);
        }
    }

    &__actions {
        margin-bottom: 12px;
    }

    &__action {
        &:not(:first-child) {
            margin-left: 10px;
        }
    }

    &__request-id {
        color: var(--g-color-text-hint);
        letter-spacing: 1px;
        font-size: 11px;
        margin-bottom: 6px;
    }

    &__report {
        color: var(--g-color-text-secondary);
        font-size: 13px;
        line-height: 16px;
    }

    &__message {
        padding-left: 28px;
        margin-bottom: 8px;
        color: var(--g-color-text-misc);
    }

    &__code-block {
        font-family: $monospaceFontFamily;
        white-space: pre-wrap;
        word-wrap: break-word;
        background-color: var(
            --dl-color-dashboard-background,
            var(--g-color-base-generic-ultralight)
        );
        padding: 10px;
        font-size: 13px;
        border-radius: 4px;
        margin-bottom: 12px;
    }
}
