@use '../colors';

.root {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  font-size: 14px;
  line-height: 20px;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  &.type-info {
    color: colors.$basic-gray87;
    background-color: colors.$basic-gray4;
    .unknown-content {
      a {
        color: colors.$basic-blue;
        text-decoration: underline;
        &:hover {
          color: colors.$additional-deep-blue;
        }
      }
    }
  }
  &.type-error {
    color: colors.$basic-white;
    background-color: colors.$additional-deep-red;
    .unknown-content {
      a {
        color: colors.$basic-white;
        text-decoration: underline;
        &:hover {
          color: colors.$basic-gray4;
        }
      }
    }
  }
  &.type-success {
    color: colors.$basic-white;
    background-color: colors.$additional-teal;
    .unknown-content {
      a {
        color: colors.$basic-white;
        text-decoration: underline;
        &:hover {
          color: colors.$basic-gray4;
        }
      }
    }
  }
  &.type-warning {
    color: colors.$basic-gray87;
    background-color: colors.$additional-yellow;
    .unknown-content {
      a {
        color: colors.$basic-gray87;
        text-decoration: underline;
        &:hover {
          color: colors.$basic-gray54;
        }
      }
    }
  }
}

.adornment {
  flex-grow: 0;
  flex-shrink: 0;
  svg {
    display: inline-block;
    fill: currentColor; // чтобы иконка подхватывала цвет текста панели
    vertical-align: -3px; // чтобы иконка выравнивалась по линии первой строки текста
  }
}

.main {
  flex-grow: 1;
}

.adornment + .main {
  margin-left: 16px;
}

.main + .adornment {
  margin-left: 16px;
}