@import "../variables";
@import "../mixins/display";

.cr-hu-alert {
  @include card-boxing;

  position: relative;
  margin-bottom: 20px;
  padding: 15px 15px 13px 52px;
  border-bottom: 2px solid;
  font-size: $font-size-large;

  .cr-hu-alert__icon {
    @extend .cr-i;

    position: absolute;
    top: 10px;
    left: 11px;
    border-radius: 50%;
    width: 31px;
    height: 31px;
    text-align: center;
    color: $WHITE;

    &::before {
      position: relative;
      top: 6px;
      left: 0;
      font-size: 1.357rem;

      @media (min-width: $screen-sm-min) {
        left: 0.5px;
      }
    }
  }

  .cr-hu-alert__text {
    display: inline-block;
  }

  ul,
  ol {
    margin-top: 5px;
    margin-left: 25px;
  }

  &.cr-hu-alert--dismissible {
    padding-right: 45px;

    .cr-hu-alert__dismiss {
      @extend .cr-i, .cr-i--close;

      position: absolute;
      top: 11px;
      right: 9px;
      width: 30px;
      height: 30px;
      text-align: center;
      background: none;
      border: 0;
      color: $gray-40;

      &:hover {
        color: $gray-50;
      }
    }
  }

  &.cr-hu-alert--info {
    border-bottom-color: $brand-info;

    .cr-hu-alert__icon {
      @extend .cr-i--info;
      background-color: $brand-info;
    }
  }

  &.cr-hu-alert--success {
    border-bottom-color: $brand-success;

    .cr-hu-alert__icon {
      @extend .cr-i--checkmark;
      background-color: $brand-success;
    }
  }

  &.cr-hu-alert--warning {
    border-bottom-color: $brand-warning;

    .cr-hu-alert__icon {
      @extend .cr-i--warning;
      background-color: $brand-warning;

      &::before {
        top: 5px;
      }
    }
  }

  &.cr-hu-alert--error {
    border-bottom-color: $brand-danger;

    .cr-hu-alert__icon {
      @extend .cr-i--times;
      background-color: $brand-danger;
    }
  }

  &:last-child {
    margin-bottom: 0;
  }
}