/* NGX-BOOTSTRAP ACCORDION THEME OVERRIDES
   -------------------------------------------------------------------------------------------------------------------------------------------- */

accordion {
  .card-header {
    background-color: $white;
    position: relative;
    padding-right: 0;
    padding: 5px 0;
    border: none;
  }

  .card-body {
    padding: 0;
  }

  .panel-open>.card {
    &>.card-header .#{ $theme-prefix }-accordion__heading--with-arrow .#{ $theme-prefix }-accordion__col:first-child::before {
      content: "\f107";
    }
  }
}

/* NGX-BOOTSTRAP TOASTER THEME OVERRIDES
   -------------------------------------------------------------------------------------------------------------------------------------------- */
.toast {
  background-image: none;
  padding: 0 !important;

  max-width: 500px;
  overflow: hidden;
  font-size: 0.875rem;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  box-shadow: 0 .25rem .75rem rgba($black, .1) !important;
  color: $black;

  button {
    position: absolute;
    right: 8px;
    top: 4px;
    float: right;
    font-size: 20px;
    font-weight: bold;
    color: gray;
    text-shadow: 0 1px 0 $white;
    z-index: 9;
    opacity: 0.8;
  }

  &-success {
    .toast-title {
      border-bottom: 1px solid $success;
      color: $success;

      &::before {
        content: '\f00c';
      }
    }
  }

  &-info {
    .toast-title {
      border-bottom: 1px solid $info;
      color: $info;

      &::before {
        content: '\f05a';
      }
    }
  }

  &-warning {
    .toast-title {
      border-bottom: 1px solid $warning;
      color: $warning;

      &::before {
        content: '\f071';
      }
    }
  }

  &-error {
    .toast-title {
      border-bottom: 1px solid $danger;
      color: $danger;

      &::before {
        content: '\f057';
      }
    }
  }
}

.toast-title {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background-color: $white;
  background-clip: padding-box;
  position: relative;

  &::before {
    @include fontawesome;
    font-size: 20px;
    display: inline-block;
    margin-right: 5px;
  }
}

.toast-message {
  padding: 0.75rem;
  background-color: $body-background;
  color: #212529;
}


/* NG-SELECT THEME OVERRIDES
   -------------------------------------------------------------------------------------------------------------------------------------------- */
.ng-select {
  &-focused &-container {
    border-bottom: 2px solid $primary !important;
  }

  &-container {
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 2px solid $secondary !important;
  }
}

.ng-dropdown-panel {
  top: 105% !important;
}


/* BUTTON THEME OVERRIDES
   -------------------------------------------------------------------------------------------------------------------------------------------- */

.btn-cancel {
  color: txtColorSwitch($dark-theme: $isDarkTheme, $other-color: true, $light-color: $cancel, $dark-color: $dark-secondary) !important;

  &:hover {
    color: txtColorSwitch($dark-theme: $isDarkTheme, $other-color: true, $light-color: $cancel, $dark-color: $dark) !important;
  }
}


/* NG-SELECT OVERRIDES
   -------------------------------------------------------------------------------------------------------------------------------------------- */

.ng-select {
  &.is-invalid {
    .ng-select-container {
      border-bottom-color: $primary !important;
    }
  }

  .ng-select-container {
    border-bottom: $select-default-border !important;
    background-color: bgColorSwitch($dark-theme: $isDarkTheme, $other-color: true, $color: transparent) !important;
    color: txtColorSwitch($dark-theme: $isDarkTheme, $other-color: true, $light-color: $dark, $dark-color: $dark-secondary) !important;
  }

  &-focused .ng-select-container {
    border-bottom: $select-focused-border !important;
  }

  .ng-option {
    background-color: bgColorSwitch($dark-theme: $isDarkTheme, $other-color: true, $color: transparent) !important;
    color: txtColorSwitch($dark-theme: $isDarkTheme, $other-color: true, $light-color: $dark, $dark-color: $dark-secondary) !important;

    &.ng-option-marked {
      background-color: $select-option-hover !important;
    }

    &.ng-option-selected {
      background-color: $select-option-selected !important;
    }
  }

  .ng-input input {
    color: txtColorSwitch($dark-theme: $isDarkTheme, $other-color: true, $light-color: $dark, $dark-color: #fff) !important;
  }

  .ng-clear-wrapper:hover .ng-clear {
    color: $primary;
  }

  .ng-arrow {
    border-color: $primary transparent transparent !important;
  }

  &.ng-select-opened .ng-arrow {
    border-color: transparent transparent $primary !important;
  }
}



/* MODAL THEME OVERRIDES
   -------------------------------------------------------------------------------------------------------------------------------------------- */

.pass-modal {
  label {
    color: txtColorSwitch($dark-theme: $isDarkTheme, $other-color: true, $light-color: $dark, $dark-color: $dark-secondary);
  }

  .modal-body {
    padding: 0 3rem 6rem 3rem;
  }

  .modal-body-sm {
    padding: 0 3rem 2rem 3rem;
  }

  .modal-content {
    border-radius: 15px;
  }

  .modal-footer-sm .btn {
    min-width: 100px !important;
  }

  .modal-title {
    margin-bottom: 15px !important;
  }

  .modal-header {
    border-bottom: none !important;
    padding: 7px 10px 0 0;
  }

  .modal-footer {
    border-top: none;
    background-color: bgColorSwitch($dark-theme: $isDarkTheme, $surface: true, $other-color: true, $color: transparentize($secondary, .8));
    border-radius: 0 0 15px 15px !important;

    .btn {
      min-width: 150px;
      border-radius: 100px !important;
    }
  }

  .pu-modal-content label {
    font-weight: 600;
    color: $dark;
  }

  .pu-modal-content,
  .text-secondary {
    font-size: 14px;
  }

  .close {
    font-weight: 400;
    color: #222222;
    opacity: 1;
    font-size: 2rem;
    transform: translate(-4px, 1px);

    &:focus {
      outline: none;
      box-shadow: none;
    }
  }

  .ng-select-container {
    border-bottom: 2px solid $secondary !important;
  }
}