// ┌────────┐
// │ Alerts │
// └────────┘
//  ↳ http://esri.github.io/calcite-web/documentation/components/#alerts
//  ↳ components → _alerts.md

@mixin alert() {
  @include font-size(-1);
  padding: $baseline/2 $baseline/2;
  @include text-color($transparent-black);
  background-color: $lightest-blue;
  position: relative;
  display: none;
  z-index: 100;
  max-width: 40em;
  border: 1px solid $blue;
  @include box-shadow($box-shadow);
  @include link-color($off-black, $black);
  &.is-active {
    display: block;
  }
  a:hover {
    color: $transparent-black;
  }
}

@mixin alert-red() {
  background-color: $Calcite_Red_100;
  border-color: $light-red;
}

@mixin alert-yellow() {
  background-color: $Calcite_Yellow_100;
  border-color: $yellow;
}

@mixin alert-green() {
  background-color: $Calcite_Green_100;
  border-color: $light-green;
}

@mixin alert-close() {
  @include btn-link;

  color: currentColor;
  position: absolute;
  @include position-right($baseline/2);
}

@mixin alert-full() {
  max-width: none;
}

@if $include-alerts == true {
  .alert {
    @include alert();
  }
  .alert-red {
    @include alert-red();
  }
  .alert-yellow {
    @include alert-yellow();
  }
  .alert-green {
    @include alert-green();
  }
  .alert-close {
    @include alert-close();
  }
  .alert-full {
    @include alert-full();
  }
}
