// ==========================================================================
//   Form Select Variables
// ==========================================================================

// Use shared button/input padding for consistency
$form-select-padding: $input-btn-padding-y $input-btn-padding-x !default;

// ==========================================================================
//   Form Select Base
// ==========================================================================

.form-select {
  box-sizing: border-box;
  height: $input-btn-minheight;
  padding: $form-select-padding;
  line-height: 1.2;
  border: 1px solid var(--bs-border-color);
  transition: border-color 0.15s ease-in-out;

  &:not(:disabled):not(:focus):hover {
    border-color: var(--bs-gray-500);
  }

  &:disabled {
    cursor: not-allowed;
    background-color: var(--bs-secondary-bg);
    opacity: 0.65;
  }

  &:focus {
    border-color: var(--bs-primary);
  }

  &[multiple] {
    height: auto;
    min-height: 100px;
    padding: 0.5rem;
  }
}

// ==========================================================================
//   Form Select Sizes
// ==========================================================================

.form-select-xs {
  @include form-control-size(
    $input-btn-minheight-xs,
    $input-btn-padding-xs,
    $input-btn-font-size-xs
  );
}

.form-select-sm {
  @include form-control-size(
    $input-btn-minheight-sm,
    $input-btn-padding-sm,
    $input-btn-font-size-sm
  );
}

.form-select-lg {
  @include form-control-size(
    $input-btn-minheight-lg,
    $input-btn-padding-lg,
    $input-btn-font-size-lg
  );
}

.form-select-xl {
  @include form-control-size(
    $input-btn-minheight-xl,
    $input-btn-padding-xl,
    $input-btn-font-size-xl
  );
}
