/*
 * CloudBeaver - Cloud Database Manager
 * Copyright (C) 2020-2024 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0.
 * you may not use this file except in compliance with the License.
 */
.errorName {
  composes: theme-typography--headline6 from global;
}

.error {
  flex: 1;
  display: flex;
  padding: 24px;

  &.icon {
    padding: 0;
    height: 100%;
    width: 100%;
    max-height: 24px;
    max-width: 24px;

    & .errorIcon {
      display: flex;
      align-items: center;
      align-content: center;

      & .iconOrImage {
        height: 100%;
        width: 100%;
      }
    }
  }

  & .errorData {
    padding: 0 16px;

    & .errorName {
      height: 40px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin: 0;

      & span {
        display: inline-block;
        vertical-align: middle;
        line-height: normal;
      }
    }

    .errorMessage {
      flex: 1;
      overflow: auto;
      white-space: pre-wrap;
    }

    .errorActions {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      margin-top: 16px;
      gap: 16px;
    }
  }

  &.inline {
    align-items: center;
    height: 38px;
    padding: 0;

    & .errorData {
      display: flex;
      align-items: center;
      padding: 0;
    }

    & .errorIcon {
      display: flex;
      align-items: center;
      align-content: center;

      & .iconOrImage {
        height: 24px;
        width: 24px;
      }
    }

    & .errorMessage {
      line-height: 1.2;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      padding: 0 16px;
    }
    & .errorName {
      display: none;
    }
    & .errorActions {
      margin-top: 0;
    }
  }

  .errorActionClose {
    cursor: pointer;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
}