@import '../style/functions.scss';
@import '../style/theme.scss';
@import '../style/mixins.scss';

$alert-prefix-cls: 'dk-alert';

.#{$alert-prefix-cls} {
  @include reset-component();
  position: relative;
  padding: $alert-padding-y $alert-padding-x;
  margin-bottom: $alert-margin-bottom;
  border: 1px solid transparent;
  border-radius: $alert-border-radius;
  transform-origin: 0 0;

  h3, h4, h5 {
    margin-top: 0.3em;
    color: inherit;
    font-size: 16px;
  }

  a {
    font-weight: $alert-link-font-weight;
  }

  &-enter {
    opacity: 0;
    transform: scaleY(0);
  }

  &-enter-active {
    opacity: 1;
    transform: scaleY(1);
    transition: transform 0.216s, opacity 0.216s ease-in;
  }

  &-exit {
    opacity: 1;
    transform: scaleY(1);
  }

  &-exit-active {
    opacity: 0;
    transform: scaleY(0);
    transition: transform 0.216s, opacity 0.216s ease-out;
  }

  &-with-close {
    padding-right: $alert-padding-x + $alert-close-size;
  }

  &-close {
    position: absolute;
    top: $alert-padding-y;
    right: 12px;
    margin-top: 1px;
    font-size: $alert-close-size;
    color: $alert-close-color;
    transition: color .3s;
    cursor: pointer;

    &:hover {
      color: $alert-close-hover-color;
    }
  }

  &-with-icon {
    padding-left: $alert-padding-x + 22px;
  }

  &-icon-box {
    position: absolute;
    top: 0;
    left: $alert-padding-x;
    height: 100%;
    display: flex;
    align-items: center;
  }

  &-icon {
    font-size: $font-size-lg;
    font-weight: bold;
  }

  &-default {
    @include alert-variant($alert-default-bg, $alert-default-border, $alert-default-text);
  }

  // Alternate alerts
  @each $type, $color in $alert-type-colors {
    &-#{$type} {
      @include alert-variant(
        theme-color-level($color, $alert-bg-level),
        theme-color-level($color, $alert-border-level),
        theme-color-level($color, $alert-color-level)
      );

      svg path {
        fill: theme-color-level($color, $alert-color-level);
      }
    }
  }
}