/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../mixins/alert.less';
@import '../custom.less';
@import './vars.less';
@import '../transition/alert-fade.less';

@alert-prefix-cls: ~'@{css-prefix}alert';

.@{alert-prefix-cls} {
  .component-css-vars-alert();

  position: relative;
  border: 1px solid;
  border-radius: var(--ti-alert-border-radius);
  font-family: var(--ti-alert-font-family);

  &&--normal {
    padding: var(--ti-alert-normal-padding-top) var(--ti-alert-normal-padding-right)
      var(--ti-alert-normal-padding-bottom) var(--ti-alert-normal-padding-left);
    margin: var(--ti-alert-normal-margin-vertical) var(--ti-alert-normal-margin-horizontal);
    display: flex;
    justify-content: flex-start;

    .@{alert-prefix-cls}__content {
      padding: var(--ti-alert-normal-content-padding-vertical) var(--ti-alert-normal-content-padding-horizontal);
      display: table-cell;
      max-width: calc(100% - 30px);
    }
  }

  &&--large {
    padding: var(--ti-alert-large-padding-top) var(--ti-alert-large-padding-right) var(--ti-alert-large-padding-bottom)
      var(--ti-alert-large-padding-left);
    display: flex;

    .@{alert-prefix-cls}__content {
      padding-left: var(--ti-alert-large-content-padding-left);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .@{alert-prefix-cls}__description {
      margin-bottom: var(--ti-alert-description-margin-bottom);
      margin-top: var(--ti-alert-description-margin-top);
      color: var(--ti-alert-description-text-color);

      &.is-hide {
        margin: 0;
      }
    }

    .@{alert-prefix-cls}__icon {
      font-size: var(--ti-alert-large-icon-font-size);
      margin-top: var(--ti-alert-large-icon-margin-top);
      vertical-align: top;
      flex-shrink: 0;
    }

    .@{alert-prefix-cls}__close {
      font-size: var(--ti-alert-large-close-font-size);
      top: 12px;
      right: 12px;
      transform: none;
      margin-top: 0;
    }
  }

  &&--success {
    .alert-variant(var(--ti-alert-title-text-color);
      var(--ti-alert-success-border-color);
      var(--ti-alert-success-icon-color);
      var(--ti-alert-success-link-text-color);
      var(--ti-alert-success-bg-color);
      var(--ti-alert-success-close-icon-color));

    .@{alert-prefix-cls}__close:hover {
      fill: var(--ti-alert-success-close-hover-icon-color);
    }
  }

  &&--info {
    .alert-variant(var(--ti-alert-title-text-color);
      var(--ti-alert-info-border-color);
      var(--ti-alert-info-icon-color);
      var(--ti-alert-info-link-text-color);
      var(--ti-alert-info-bg-color);
      var(--ti-alert-info-close-icon-color));

    .@{alert-prefix-cls}__close:hover {
      fill: var(--ti-alert-info-close-hover-icon-color);
    }
  }

  &&--warning {
    .alert-variant(var(--ti-alert-title-text-color);
      var(--ti-alert-warning-border-color);
      var(--ti-alert-warning-icon-color);
      var(--ti-alert-warning-link-text-color);
      var(--ti-alert-warning-bg-color);
      var(--ti-alert-warning-close-icon-color));

    .@{alert-prefix-cls}__close:hover {
      fill: var(--ti-alert-warning-close-hover-icon-color);
    }
  }

  &&--error {
    .alert-variant(var(--ti-alert-title-text-color);
      var(--ti-alert-error-border-color);
      var(--ti-alert-error-icon-color);
      var(--ti-alert-error-link-text-color);
      var(--ti-alert-error-bg-color);
      var(--ti-alert-error-close-icon-color));

    .@{alert-prefix-cls}__close:hover {
      fill: var(--ti-alert-error-close-hover-icon-color);
    }
  }

  &&--simple {
    .alert-variant(var(--ti-alert-title-text-color);
      var(--ti-alert-simple-border-color);
      var(--ti-alert-simple-icon-color);
      var(--ti-alert-simple-link-text-color);
      var(--ti-alert-simple-bg-color);
      var(--ti-alert-simple-close-icon-color));

    .@{alert-prefix-cls}__close:hover {
      fill: var(--ti-alert-simple-close-hover-icon-color);
    }
  }

  &__icon {
    font-size: var(--ti-alert-icon-font-size);
  }
  &__icon:first-child{
    margin-top: var(--ti-alert-icon-margin-top);
  }

  &.is-center {
    justify-content: center;
    text-align: center;
  }

  .is-custom {
    position: absolute;
    font-size: var(--ti-alert-close-text-font-size);
    top: var(--ti-alert-close-position-top);
    right: 12px;
    cursor: pointer;
  }

  & &__close {
    font-size: var(--ti-alert-close-font-size);
    position: absolute;
    top: var(--ti-alert-close-position-top);
    right: 12px;
    cursor: pointer;
  }

  & &__content {
    .@{alert-prefix-cls}__opration {
      font-size: var(--ti-alert-opration-font-size);
      color: var(--ti-alert-opration-text-color);
      line-height: 1;

      a {
        font-size: var(--ti-alert-opration-font-size);
        color: var(--ti-alert-opration-text-color);
      }

      a:not(:last-child) {
        margin-right: 16px;
      }
    }
  }

  & &__title {
    font-size: var(--ti-alert-title-font-size);
    color: var(--ti-alert-title-text-color);
    font-weight: bold;
  }

  & &__description {
    font-size: var(--ti-alert-description-font-size);
    line-height: var(--ti-alert-description-line-height);
  }
}
