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

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

.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 $colorName, $color, $color-light in $colors {
  .alert-#{$colorName} {
    @include color('color', #{$colorName}-text);
    @include color('background-color', #{$colorName}-light);
    @include color('border-color', #{$colorName});

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

.alert-state {
  display: none;

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