/* Main Select2 container styling to match Tabler form-select */
.select2-container .select2-selection--single {
  height: calc(
    1.4285714286em + 0.875rem + calc(var(--tblr-border-width) * 2)
  ) !important;
  padding: 0.4375rem 2.25rem 0.4375rem 0.75rem !important;
  font-family: var(--tblr-body-font-face) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.4285714286 !important;
  color: var(--tblr-body-color) !important;
  background-color: var(--tblr-bg-forms) !important;
  border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
  border-radius: var(--tblr-border-radius) !important;
  box-shadow: var(--tblr-shadow-input) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Select2 selection rendered text */
.select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.4285714286 !important;
  color: var(--tblr-body-color) !important;
}

/* Select2 placeholder styling */
.select2-container .select2-selection--single .select2-selection__placeholder {
  color: var(--tblr-secondary) !important;
}

/* Select2 arrow styling to match Tabler */
.select2-container .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  right: 0.75rem !important;
  top: 0 !important;
}

.select2-container .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

/* Custom arrow using Tabler's SVG */
.select2-container .select2-selection--single .select2-selection__arrow:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 16px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 12px;
  transition: transform 0.2s ease-in-out;
}

/* Arrow rotation when dropdown is open */
.select2-container--open
  .select2-selection--single
  .select2-selection__arrow:after {
  transform: translateY(-50%) rotate(180deg);
}

/* Focus state */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus
  .select2-selection--single {
  border-color: #83b7e8 !important;
  outline: 0 !important;
  box-shadow: var(--tblr-shadow-input),
    0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25) !important;
}

/* Dropdown styling */
.select2-container--default .select2-dropdown {
  background-color: var(--tblr-bg-forms) !important;
  border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
  border-radius: var(--tblr-border-radius) !important;
  box-shadow: var(--tblr-shadow-input) !important;
}

/* Dropdown options */
.select2-container--default .select2-results__option {
  padding: 0.4375rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.4285714286 !important;
  color: var(--tblr-body-color) !important;
}

.select2-container--default .select2-results__option--highlighted {
  background-color: rgba(var(--tblr-primary-rgb), 0.04) !important;
  color: var(--tblr-primary) !important;
}

.select2-container--default .select2-results__option--selected {
  background-color: var(--tblr-primary) !important;
  color: white !important;
}

/* Search field in dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 0.4375rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.4285714286 !important;
  color: var(--tblr-body-color) !important;
  background-color: var(--tblr-bg-forms) !important;
  border: var(--tblr-border-width) solid var(--tblr-border-color) !important;
  border-radius: var(--tblr-border-radius) !important;
}

/* Disabled state */
.select2-container--disabled .select2-selection--single {
  background-color: var(--tblr-bg-surface-secondary) !important;
}

/* Dark theme support */
[data-bs-theme="dark"]
  .select2-container
  .select2-selection--single
  .select2-selection__arrow:after,
body[data-bs-theme="dark"]
  [data-bs-theme="light"]
  .select2-container
  .select2-selection--single
  .select2-selection__arrow:after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Small size variant */
.form-select-sm.select2 + .select2-container .select2-selection--single {
  height: calc(
    1.4285714286em + 0.125rem + calc(var(--tblr-border-width) * 2)
  ) !important;
  padding: 0.0625rem 2.25rem 0.0625rem 0.25rem !important;
  font-size: 0.75rem !important;
  border-radius: var(--tblr-border-radius-sm) !important;
}

/* Large size variant */
.form-select-lg.select2 + .select2-container .select2-selection--single {
  height: calc(
    1.4285714286em + 1.375rem + calc(var(--tblr-border-width) * 2)
  ) !important;
  padding: 0.6875rem 2.25rem 0.6875rem 1.5rem !important;
  font-size: 1.25rem !important;
  border-radius: var(--tblr-border-radius-lg) !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .select2-container .select2-selection--single {
    transition: none !important;
  }

  .select2-container
    .select2-selection--single
    .select2-selection__arrow:after {
    transition: none !important;
  }
}

/* Mobile responsive */
@media (max-width: 575.98px) {
  .select2-container .select2-selection--single {
    font-size: 1rem !important;
  }
}
