// Bootstrap Select
// *******************************************************************************

@use '../../scss/_bootstrap-extended/include' as light;
@use '../../scss/_bootstrap-extended/include-dark' as dark;
@import '../../scss/_custom-variables/libs';
@import 'bootstrap-select/sass/bootstrap-select.scss';

// Common Styles
.bootstrap-select *,
.bootstrap-select .dropdown-toggle:focus {
  outline: 0 !important;
}
.bootstrap-select {
  .bs-searchbox,
  .bs-actionsbox,
  .bs-donebutton {
    padding: 0 0 8px;
  }
  .dropdown-toggle {
    transition: none;
    padding: calc(light.$input-padding-y - light.$input-border-width) light.$input-padding-x;
    box-shadow: none !important;
    &.show,
    &:focus {
      padding: calc(light.$input-padding-y - light.$input-focus-border-width)
        calc(light.$input-padding-x - light.$input-border-width);
    }
    &:after {
      transform: rotate(45deg) translateY(-100%);
      position: absolute;
      inset-inline-end: 23px;
      top: 50%;
      margin: 0 !important;
      @include app-rtl {
        inset-inline-end: 12px;
      }
    }
    &:active {
      transform: none !important;
    }
    &.show {
      &:after {
        inset-inline-end: calc(23px - light.$input-border-width);
        @include app-rtl {
          inset-inline-end: calc(12px - light.$input-border-width);
        }
      }
    }
    .filter-option-inner-inner {
      line-height: light.$input-line-height;
    }
  }
  .btn {
    &:disabled,
    &.disabled {
      color: light.$btn-color !important;
    }
  }

  // For header dropdown close btn
  .dropdown-menu .popover-header {
    display: flex;
    align-items: center;
    button {
      border: none;
      font-size: light.$h4-font-size;
      background: transparent;
      padding-bottom: 0.125rem;
    }
  }
  .is-invalid {
    ~ .dropdown-toggle {
      &:after {
        inset-inline-end: calc(23px - light.$input-border-width);
        @include app-rtl {
          inset-inline-end: calc(12px - light.$input-border-width);
        }
      }
    }
  }
}

.bootstrap-select.dropup {
  .dropdown-toggle {
    &:after {
      transform: rotate(317deg) translateY(-30%);
      inset-inline-end: 14px;
      @include app-rtl {
        inset-inline-end: calc(18px);
      }
    }
    &.show {
      &:after {
        inset-inline-end: calc(14px - light.$input-border-width);
        @include app-rtl {
          inset-inline-end: calc(18px - light.$input-border-width);
        }
      }
    }
  }
  .is-invalid {
    ~ .dropdown-toggle {
      &:after {
        inset-inline-end: calc(14px - light.$input-border-width);
        @include app-rtl {
          inset-inline-end: calc(18px - light.$input-border-width);
        }
      }
    }
  }
}

// Menu Position
.bootstrap-select.show-tick .dropdown-menu {
  li a {
    position: relative;
  }
  // RTL
  @include app-rtl {
    li a span.text {
      margin-left: 2.125rem;
      margin-right: 0;
    }
  }

  .selected span.check-mark {
    display: block;
    right: 1rem;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
    line-height: 1;

    @include app-rtl {
      left: 1rem;
      right: auto;
    }
  }
}

// To remove ripple effect
.bootstrap-select .dropdown-menu.inner .selected .waves-ripple {
  display: none !important;
}

.bootstrap-select:not(.input-group-btn),
.bootstrap-select[class*='col-'] {
  display: block;
}

html[class] .bootstrap-select.form-select {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

// RTL

@include app-rtl(false) {
  .bootstrap-select .dropdown-toggle .filter-option {
    float: right;
    right: 0;
    left: auto;
    text-align: right;
    padding-left: inherit;
    padding-right: 0;
    margin-left: -100%;
    margin-right: 0;
  }
  // Fix: Subtext rtl support
  .bootstrap-select .filter-option-inner-inner {
    float: right;
  }
  .bootstrap-select .dropdown-menu li small.text-muted,
  .bootstrap-select .filter-option small.text-muted {
    position: relative;
    top: 2px;
    padding-left: 0;
    padding-right: 0.5em;
    float: left;
  }

  .bootstrap-select .dropdown-toggle .filter-option-inner {
    padding-left: inherit;
    padding-right: 0;
  }
}

// Light style
@if $enable-light-style {
  .light-style {
    .bootstrap-select {
      background-color: light.$input-bg;
      .dropdown-toggle {
        border-radius: light.$border-radius;
        border: light.$input-border-width solid light.$input-border-color;
        &.show,
        &:focus {
          border: light.$input-focus-border-width solid light.$primary;
        }
        &:not(.show):hover {
          border-color: light.$input-border-hover-color;
        }
      }
      .dropdown-menu {
        &[data-popper-placement='top-start'],
        &[data-popper-placement='top-end'] {
          box-shadow: 0 -0.2rem 1.25rem rgba(light.rgba-to-hex(light.$gray-500, light.$rgba-to-hex-bg), 0.4);
        }
        .notify {
          background: light.$popover-bg;
          border: light.$input-border-width solid light.$popover-border-color;
        }
        .popover-header button {
          color: light.$body-color;
        }
      }
    }
  }
}

// Dark Style
@if $enable-dark-style {
  .dark-style {
    .bootstrap-select {
      background-color: dark.$input-bg;
      .dropdown-toggle {
        color: dark.$input-color;
        &:hover {
          color: dark.$input-color;
        }
        border: dark.$input-border-width solid dark.$input-border-color;
        border-radius: dark.$border-radius;
        &.show,
        &:focus {
          border: dark.$input-focus-border-width solid dark.$primary;
        }
        &:not(.show):hover {
          border-color: dark.$input-border-hover-color;
        }
      }
      .dropdown-menu {
        &[data-popper-placement='top-start'],
        &[data-popper-placement='top-end'] {
          box-shadow: 0 -0.2rem 1.25rem rgba(15, 20, 34, 0.55);
        }
        .notify {
          background: dark.$popover-bg;
          border: dark.$input-border-width solid dark.$popover-border-color;
        }
        .popover-header button {
          color: dark.$body-color;
        }
      }
    }
  }
}