// Alerts
.alert-danger {
  --bs-alert-color: #{$red-700};
  --bs-alert-bg: #{$red-200};
}
.alert-success {
  --bs-alert-color: #{$green-700};
  --bs-alert-bg: #{$green-200};
}
.alert-primary {
  --bs-alert-color: #{$blue-800};
  --bs-alert-bg: #{$blue-200};
}
.alert-secondary {
  --bs-alert-color: #{$gold-800};
  --bs-alert-bg: #{$gold-200};
}

// Buttons
.btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.btn-secondary,
.btn-info {
  --bs-btn-color: white;
  --bs-btn-hover-color: white;
  --bs-btn-active-color: white;
  --bs-btn-disabled-color: white;
}
.btn-light {
  --bs-btn-color: $dark;
  --bs-btn-hover-color: $dark;
  --bs-btn-active-color: $dark;
  --bs-btn-disabled-color: $dark;
  --bs-btn-hover-bg: var(--bs-gray-200);
  --bs-btn-bg: white;
}
.btn-outline-secondary:hover {
  color: white;
}
.btn-with-icon {
  display: inline-flex;
  align-items: center;

  img,
  i {
    margin-right: 0.5rem;
  }

  img {
    height: 1rem;
  }
}

.text-bg-secondary {
  color: white !important;
}
// Button Ripple effect
.ripple-effect {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  &:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.3s, opacity 1s;
  }
  &:active:after {
    transform: scale(0, 0);
    opacity: 0.2;
    transition: 0s;
  }
}
.btn:not(.btn-link) {
  @extend .ripple-effect;
}
.btn.dropdown-toggle:after {
  display: none; // remove caret
}
.btn[type='submit'] {
  width: 100%;
  justify-content: center;
}

// Form
.form-group {
  margin-bottom: 1rem;
}
.form-check-input,
.form-check-label {
  cursor: pointer;
}
.form-label {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 5px;
}
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 18'%3e%3cpath fill='none' stroke='%23a1a1a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  &.auto-resize {
    padding-right: 2.3em;
  }
}
.form-check {
  margin-bottom: 0.25rem;
}
.input-group-text {
  background-color: var(--bs-light);
}
// mandatory asterix for required inputs
abbr[title],
abbr[data-original-title] {
  cursor: help;
  color: var(--bs-danger);
  border: none;
  text-decoration: none !important;
}

// Card
.card {
  @extend .shadow-sm;
  @include media-breakpoint-down(md) {
    --bs-card-cap-padding-x: 1rem;
    --bs-card-spacer-x: 1rem;
  }
}

// Modal
.modal .modal-dialog {
  @extend .modal-fullscreen-md-down;
  transform-origin: center bottom;

  .modal-header {
    .modal-title {
      @extend .ff-heading;
      @extend .fs-2;
      @extend .text-primary;
    }
    .btn-close {
      margin-top: 0;
    }
  }
  .modal-footer {
    padding-top: 0;
  }
}

// Other
.dropdown-item {
  cursor: pointer;
}

// Table
.table {
  font-size: 1rem;
}