keuangan/resources/scss/plugin/select2.scss

@import "../variables";
@import "select2/dist/css/select2.min.css";
@import "select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css";

// Select2 Theme Overrides
.select2-container {
  font-family: $font-family-base;
  font-size: $font-size-base;
  width: 100% !important;

  // Main selection box
  .select2-selection--single,
  .select2-selection--multiple {
    font-family: $font-family-base;
    font-size: $font-size-base;
    border: 1px solid $border-color;
    border-radius: 0.5rem !important;
    background-color: $white;
    transition: border-color 0.15s, box-shadow 0.15s;

    &:hover {
      border-color: $gray-600;
    }
  }

    // Single select rendered value
  .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);

    .select2-selection__rendered {
      color: $gray-800;
      padding-left: 0.75rem;
      padding-right: 2rem;
      width: 90%;
      line-height: calc(1.5em + 0.75rem);
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      display: block !important;

      // Increase padding right when clear button is present so text truncates before it
      &:has(.select2-selection__clear) {
        padding-right: .3rem !important;
      }
    }

    .select2-selection__placeholder {
      color: $gray-600;
    }

    .select2-selection__clear {
      position: absolute;
      right: 1.8rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      cursor: pointer;
      color: $gray-500;
      background: transparent;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 1rem;
      width: 1rem;
      line-height: 1;

      &:hover {
        color: $danger;
      }
    }

    .select2-selection__arrow {
      height: 100%;
      right: 0.5rem;

      b {
        border-color: $gray-600 transparent transparent;
        border-width: 5px 4px 0;
      }
    }
  }

  // Multiple select tags
  .select2-selection--multiple {
    padding: 0.25rem 0.5rem;
    min-height: calc(1.5em + 0.75rem + 2px);

    .select2-selection__choice {
      background-color: rgba($primary, 0.1);
      border: 1px solid rgba($primary, 0.2);
      border-radius: 0.375rem;
      color: $primary;
      font-size: $font-size-sm;
      font-weight: 500;
      padding: 0.1rem 0.5rem;

      .select2-selection__choice__remove {
        color: $primary;
        font-weight: 700;
        margin-right: 4px;

        &:hover {
          color: $danger;
          background: transparent;
        }
      }
    }

    .select2-search__field {
      font-family: $font-family-base;
      font-size: $font-size-sm;
      color: $gray-800;

      &::placeholder {
        color: $gray-600;
      }
    }
  }

  // Focused state
  &--open,
  &--focus {

    .select2-selection--single,
    .select2-selection--multiple {
      border-color: $primary !important;
      box-shadow: 0 0 0 3px rgba($primary, 0.12) !important;
      outline: 0;
    }

    .select2-selection--single .select2-selection__arrow b {
      border-color: transparent transparent $primary;
      border-width: 0 4px 5px;
    }
  }
}

// Support for form-control-sm
select.form-control-sm + .select2-container,
select.form-select-sm + .select2-container,
.select2-container--sm {
  .select2-selection--single,
  .select2-selection--multiple {
    border-radius: 0.375rem !important;
  }

  .select2-selection--single {
    height: calc(1.5em + 0.5rem + 2px) !important;

    .select2-selection__rendered {
      padding-left: 0.5rem;
      font-size: $font-size-sm;
      line-height: calc(1.5em + 0.5rem) !important;
    }

    .select2-selection__clear {
      right: 0.5rem;
    }
  }

  .select2-selection--multiple {
    min-height: calc(1.5em + 0.5rem + 2px) !important;
    padding: 0.15rem 0.5rem;

    .select2-search__field {
      font-size: $font-size-sm;
    }
  }
}

// Dropdown panel
.select2-dropdown {
  font-family: $font-family-base;
  font-size: $font-size-base;
  border: 1px solid $border-color;
  border-radius: 0.5rem !important;
  box-shadow: 0 8px 24px rgba($black, 0.15);
  overflow: hidden;

  // Search field inside dropdown
  .select2-search--dropdown {
    padding: 0.5rem;
    background: $gray-100;
    border-bottom: 1px solid $border-color;

    .select2-search__field {
      font-family: $font-family-base;
      font-size: $font-size-sm;
      border: 1px solid $border-color;
      border-radius: 0.375rem;
      padding: 0.375rem 0.75rem;
      color: $gray-800;
      width: 100%;
      background-color: $white;

      &:focus {
        border-color: $primary;
        outline: 0;
        box-shadow: 0 0 0 3px rgba($primary, 0.12);
      }
    }
  }

  // Option list
  .select2-results__options {
    padding: 0.25rem 0;
    max-height: 220px;
    overflow-y: auto;

    // Scrollbar
    &::-webkit-scrollbar {
      width: 5px;
    }

    &::-webkit-scrollbar-track {
      background: $gray-100;
    }

    &::-webkit-scrollbar-thumb {
      background: $gray-300;
      border-radius: 4px;
    }
  }

  .select2-results__option {
    font-size: $font-size-sm;
    color: $gray-800;
    padding: 0.45rem 0.85rem;
    transition: background 0.12s;

    // Highlighted (hover or keyboard)
    &--highlighted {
      background-color: rgba($primary, 0.08) !important;
      color: $primary !important;
    }

    // Selected
    &[aria-selected='true'] {
      background-color: rgba($primary, 0.12);
      color: $primary;
      font-weight: 500;
    }

    // Disabled
    &[aria-disabled='true'] {
      color: $gray-600;
      cursor: not-allowed;
    }

    // Option group label
    &--group {
      color: $gray-500;
      font-size: $font-xs;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 0.5rem 0.85rem 0.25rem;
      cursor: default;
    }
  }
}

// Disabled state
.select2-container--disabled {

  .select2-selection--single,
  .select2-selection--multiple {
    background-color: $gray-100 !important;
    border-color: $border-color !important;
    cursor: not-allowed;

    .select2-selection__rendered {
      color: $gray-600;
    }
  }
}