@import '../../style/variables';
@import './mixin';

.#{$prefix}alert {
  border: 1px solid;
  font-family: $font-family;
  border-radius: $alert-border-radius;
  box-sizing: border-box;
  padding: 10px 30px 10px 13px;
  position: relative;
  font-weight: $font-weight;
  opacity: 1;
  font-size: $font-size;
  transition: all 300ms;
  transform-origin: center top;
  overflow: hidden;
  display: flex;
  align-items: flex-start;

  & + & {
    margin-top: 14px;
  }

  &__title {
    box-sizing: border-box;
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 500;
  }

  &__desc {
    box-sizing: border-box;
    line-height: 16px;
  }

  &__icon {
    line-height: 16px;
    margin-right: 7px;
    position: relative;
    top: 1px;
  }

  &__close-btn {
    position: absolute;
    top: 10px;
    right: 13px;
    cursor: pointer;
    float: right;
    user-select: none;
  }

  &_error {
    @include alert-mixin($red-color, $red-light-color, $red-lighter-color);
  }

  &_warning {
    @include alert-mixin($yellow-color, $yellow-light-color, $yellow-lighter-color);
  }

  &_success {
    @include alert-mixin($green-color, $green-light-color, $green-lighter-color);
  }

  &_info {
    @include alert-mixin($blue-color, $blue-light-color, $blue-lighter-color);
  }
}