@mixin btn-close-color($base-color-name) {
  @include color('color', #{$base-color-name}-text);

  &:hover,
  &:active,
  &:focus {
    @include color('color', #{$base-color-name}-dark);
  }
}

.alert {
  @include color('border-color', 'primary');
  @include border-style();
  border-style: solid;
  border-width: 2px;
  margin-bottom: 20px;
  padding: 15px;
  width: 100%;

  &.dismissible {
    @include transition;
    display: flex;
    justify-content: space-between;
    max-height: 48rem;
    overflow: hidden;
  }

  .btn-close {
    @include transition;
    @include btn-close-color(primary);
    cursor: pointer;
    margin-left: 0.75rem;
  }
}

@each $color-name, $color, $color-light, $color-text in $colors {
  .alert-#{$color-name} {
    @include color('color', #{$color-name}-text);
    @include color('background-color', #{$color-name}-light);
    @include color('border-color', $color-name);

    .btn-close {
      @include btn-close-color($color-name);
    }
  }
}

.alert-state {
  display: none;

  &:checked + .dismissible {
    border-width: 0;
    margin: 0;
    max-height: 0;
    opacity: 0;
    padding-bottom: 0;
    padding-top: 0;
  }
}