@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(alert) {
  @include set-component-css-var('alert', $alert);

  position: relative;
  width: 100%;
  padding: var(--sg-alert-padding);
  margin: 0;
  box-sizing: border-box;
  border-radius: var(--sg-alert-border-radius-base);
  border: var(--sg-border-base);
  background-color: var(--sg-color-white);
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  transition: opacity var(--sg-transition-duration-fast);

  @include e(icon) {
    font-size: var(--sg-alert-icon-size);
  }

  @include e(content) {
    display: table-cell;
    padding: 0 8px;

    @include e(title) {
      font-size: var(--sg-alert-title-size);
    }

    @include e(description) {
      font-size: var(--sg-alert-description-size);
      margin: 8px 0 0 0;
    }

    @include e(closebtn) {
      position: absolute;
      top: 50%;
      right: 16px;
      transform: translateY(-50%);
      font-size: var(--sg-alert-close-size);
      opacity: 1;
      cursor: pointer;

      @include when(customed) {
        font-style: normal;
        font-size: var(--sg-alert-close-customed-size);
        top: 9px;
      }
    }
  }

  @include when(light) {
    @include e(closebtn) {
      color: var(--sg-text-color-secondary);
    }
    @include e(description) {
      color: var(--sg-text-color-secondary);
    }
  }

  @include when(dark) {
    @include e(closebtn) {
      color: var(--sg-color-white);
    }
    @include e(description) {
      color: var(--sg-color-white);
    }
  }

  // 居中
  @include when(center) {
    justify-content: center;
  }

  // 带描述
  @include when(description) {
    padding: var(--sg-alert-padding-large);

    @include e(icon) {
      position: absolute;
      top: 16px;
      font-size: var(--sg-alert-icon-large-size);

      & + .#{$namespace}-alert__content {
        padding-left: 40px;
      }
    }

    @include e(content) {
      @include e(title) {
        font-weight: bold;
        line-height: var(--sg-alert-icon-large-size);
        font-size: var(--sg-alert-title-large-size);
      }

      @include e(closebtn) {
        top: 28px;
        right: 24px;
        font-size: var(--sg-alert-close-large-size);
      }
    }
  }

  @each $type in (primary, success, info, warning, error) {
    @include m($type) {
      --sg-alert-bg-color: #{map.get($colors, $type, 'light-9')};

      &.is-light {
        color: var(--sg-text-color-primary);
        border-color: var(--sg-color-#{$type});
        background-color: var(--sg-alert-bg-color);

        @include e(icon) {
          color: var(--sg-color-#{$type});
        }
      }

      &.is-dark {
        color: var(--sg-color-white);
        border-color: var(--sg-color-#{$type});
        background-color: var(--sg-color-#{$type});

        @include e(icon) {
          color: var(--sg-color-white);
        }
      }
    }
  }
}

.#{$namespace}-alert-fade-enter-from,
.#{$namespace}-alert-fade-leave-active {
  opacity: 0;
}