// 
// _alert.scss
// 


.b-round{
  border-radius: 40px;
}
.alert {
  position: relative;
  border: 0;

  &.custom-alert{
    overflow: hidden;
    &:after{
      content: '';
      position: absolute;
      width: 4px;
      height: 100%;
      top: 0;
      left: 0;
    }
    &.custom-alert-primary{
      &:after{
        background-color: $primary;
      }
    }
    &.custom-alert-success{
      &:after{
        background-color: $success;
      }
    }
    &.custom-alert-danger{
      &:after{
        background-color: $danger;
      }
    }
    &.custom-alert-info{
      &:after{
        background-color: $info;
      }
    }
    &.custom-alert-warning{
      &:after{
        background-color: $warning;
      }
    }
  }
  
  &.icon-custom-alert{
    display: flex;
    padding: 5px 18px;
  }
  .alert-icon{
    font-size: 21px;
    margin-right: 8px;
  }
  .alert-text{
    flex-grow: 1;
    align-self: center;
  }
  .alert-close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .alert-link {
    font-weight: 600;
  }

  &.alert-light{
    color: $dark;
    background-color: $light;
  }

  // Alert Outline

  &.alert-outline-success{
    border:1px solid $success;
    background-color: transparent;
    color: $success;
  }
  &.alert-outline-danger{
    border:1px solid $danger;
    background-color: transparent;
    color: $danger;
  }
  &.alert-outline-primary{
    border:1px solid $primary;
    background-color: transparent;
    color: $primary;
  }
  &.alert-outline-warning{
    border:1px solid $warning;
    background-color: transparent;
    color: $warning;
  }
  &.alert-outline-info{
    border:1px solid $info;
    background-color: transparent;
    color: $info;
  }
  &.alert-outline-pink{
    border:1px solid $pink;
    background-color: transparent;
    color: $pink;
  }
  &.alert-outline-purple{
    border:1px solid $purple;
    background-color: transparent;
    color: $purple;
  }
  &.alert-outline-blue{
    border:1px solid $blue;
    background-color: transparent;
    color: $blue;
  }
  &.alert-outline-secondary{
    border:1px solid $secondary;
    background-color: transparent;
    color: $secondary;
  }
  &.alert-outline-dark{
    border:1px solid $dark;
    background-color: transparent;
    color: $dark;
  }

  //Alert Shadow

  &.alert-primary-shadow{
    box-shadow: 0 0 24px 0 rgba($primary, 0.06), 0 1px 0 0 rgba($primary, 0.02);
  }
  &.alert-secondary-shadow{
    box-shadow: 0 0 24px 0 rgba($secondary, 0.18), 0 1px 0 0 rgba($secondary, 0.02);
  }
  &.alert-success-shadow{
    box-shadow: 0 0 24px 0 rgba($success, 0.06), 0 1px 0 0 rgba($success, 0.02);
  }
  &.alert-info-shadow{
    box-shadow: 0 0 24px 0 rgba($info, 0.06), 0 1px 0 0 rgba($info, 0.02);
  }
  &.alert-warning-shadow{
    box-shadow: 0 0 24px 0 rgba($warning, 0.06), 0 1px 0 0 rgba($warning, 0.02);
  }
  &.alert-danger-shadow{
    box-shadow: 0 0 24px 0 rgba($danger, 0.06), 0 1px 0 0 rgba($danger, 0.02);
  }
  &.alert-dark-shadow{
    box-shadow: 0 0 24px 0 rgba($dark, 0.06), 0 1px 0 0 rgba($dark, 0.02);
  }
  &.alert-pink-shadow{
    box-shadow: 0 0 24px 0 rgba($pink, 0.06), 0 1px 0 0 rgba($pink, 0.02);
  }
  &.alert-purple-shadow{
    box-shadow: 0 0 24px 0 rgba($purple, 0.06), 0 1px 0 0 rgba($purple, 0.02);
  }
  &.alert-blue-shadow{
    box-shadow: 0 0 24px 0 rgba($blue, 0.06), 0 1px 0 0 rgba($blue, 0.02);
  }
}


// Soft Alerts

.form-control.alert-soft-success{
  border:none;
  background-color: lighten($success, 48%);
  color: $success;
}

.form-control.alert-soft-secondary{
  border:none;
  background-color: lighten($primary, 40%);
  color: $primary;
}