@use "../variables" as *;   
@use "sass:map";

@each $state in map.keys($theme-colors) {
    .alert-#{$state} {
        color: var(--#{$state});
        background-color: var(--#{$state}-transparent);
        border-color: var(--#{$state}-transparent);
    }
    .alert-#{$state}.bg-text-#{$state} {
        color: #fff;
        border-color: var(--#{$state});
    }
    .alert.alert-#{$state} .alert-link {
        color: var(--#{$state});
    }
}
.alert-light, .alert.alert-light .alert-link {
    color: $gray-500 !important;
}

.alert {
    padding: 12px 16px;
  
    &.alert-primary {
      color: $primary;
      background-color: $primary-transparent;
      border-color: $primary-transparent;
  
      &.text-bg-primary {
        background-color: $primary !important;
        border-color: $primary;
      }
  
      .alert-link {
        color: $primary;
      }
    }
  
    &.alert-secondary {
      color: $secondary;
      background-color: $secondary-transparent;
      border-color: $secondary-transparent;
  
      &.text-bg-secondary {
        background-color: $secondary !important;
        border-color: $secondary;
      }
  
      .alert-link {
        color: $secondary;
      }
    }
  
    &.alert-success {
      color: $success;
      background-color: $success-transparent;
      border-color: $success-transparent;
  
      &.text-bg-success {
        background-color: $success !important;
        border-color: $success;
      }
  
      .alert-link {
        color: $success;
      }
    }
  
    &.alert-danger {
      color: $danger;
      background-color: $danger-transparent;
      border-color: $danger-transparent;
  
      &.text-bg-danger {
        background-color: $danger !important;
        border-color: $danger;
      }
  
      .alert-link {
                color: $danger;
      }
    }
  
    &.alert-warning {
      color: $warning;
      background-color: $warning-transparent;
      border-color: $warning-transparent;
  
      &.text-bg-warning {
        background-color: $warning !important;
        border-color: $warning;
        color: $white !important;
      }
  
      .alert-link {
        color: $warning;
      }
    }
  
    &.alert-info {
      color: $info;
      background-color: $info-transparent;
      border-color: $info-transparent;
  
      &.text-bg-info {
        background-color: $info !important;
        border-color: $info;
        color: $white !important;
      }
  
      .alert-link {
        color: $info;
      }
    }
  
    &.alert-light {
      color: $gray-500;
      background-color: $light-transparent;
      border-color: $light-transparent;
    }
  
    &.alert-dark {
      color: $dark;
      background-color: $gray-200;
      border-color: $gray-200;
    }
  
    &.alert-dismissible {
      .btn-close {
        padding: 1rem 1rem;
      }
    }
  }