// - - - - - - - - - - - - - - - - - - - - - - - - -
// Alerts
// - - - - - - - - - - - - - - - - - - - - - - - - -

@mixin CHAMELEON-alert {
  .alert {
    background-color: #fff;
    border-radius: $border-radius;
    border-style: solid;
    border-width: 1px;
    display: block;
    margin: rem-calc(10px) 0;
    max-width: 100%;
    padding: 12px 30px 12px 60px;
    text-align: left;
    width: auto;
    line-height: 1.4em;
    position: relative;

    &:before {
      background-repeat: no-repeat;
      content: "";
      height: 18px;
      left: 12px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
    }

    &__title {
      font-size: rem-calc(14px);
      display: block;
      color: inherit;
    }

    &__copy {
      font-size: rem-calc(14px);
      color: inherit;

      ul {
        margin-left: 16px;

        li {
          font-size: rem-calc(14px) !important;          
        }
      }

    }

    &__icon,
    &__icon svg {
      display: inline;
      vertical-align: bottom; 
    }

    &__icon {
      margin-right: 1em;
    }

    &--danger,
    &--error {
      border-color: lighten($color-danger, 40%);
      color: $color-danger;
      box-shadow: inset 40px 0 0 0 $color-danger;

      &:before {
        background-image: file-url('ui_icons/alert_warning.svg');
      }
    }

    &--success {
      color: darken($color-success, 5%);
      border-color: lighten($color-success, 40%);
      box-shadow: inset 40px 0 0 0 $color-success;

      &:before {
        background-image: file-url('ui_icons/alert_tick.svg');
      }
    }

    &--beta {
      color: darken($color-beta, 5%);
      border-color: lighten($color-beta, 20%);
      box-shadow: inset 40px 0 0 0 $color-beta;

      &:before {
        background-image: file-url('ui_icons/alert_beta.svg');
      }
    }

    &--information {
      border-color: $color-smoke;
      color: $color-information;
      box-shadow: inset 40px 0 0 0 $color-information;

      &:before {
        background-image: file-url('ui_icons/alert_info.svg');
      }
    }
  }
}