select.ionic.scss

@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./select.common";
@use "./select.ionic.outline" as outline;

// Ionic Select
// -------------------------------------------------

:host {
  --background: #{globals.$ion-bg-surface-default};
  // TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
  // ios and md. This will allow us to have a single color map.
  --border-color: #{globals.$ion-primitives-neutral-500};
  --border-width: #{globals.$ion-border-size-025};
  --padding-start: #{globals.$ion-space-400};
  --padding-end: #{globals.$ion-space-400};
  --padding-top: #{globals.$ion-space-300};
  --padding-bottom: #{globals.$ion-space-300};
  --placeholder-color: #{globals.$ion-primitives-neutral-800};
  --placeholder-opacity: 1;
  --highlight-color-focused: #{globals.$ion-border-focus-default};
  --highlight-color-valid: #{globals.$ion-semantics-success-900};
  --highlight-color-invalid: #{globals.$ion-semantics-danger-800};

  min-height: globals.$ion-scale-1100;
}

// Select Hint Text
// ----------------------------------------------------------------

.select-bottom {
  @include globals.padding(globals.$ion-space-100, null, null, null);
  @include globals.typography(globals.$ion-body-sm-medium);
}

.select-bottom .helper-text {
  color: globals.$ion-primitives-neutral-800;
}

.select-text {
  min-width: globals.$ion-space-400;
}

// Select Label
// ----------------------------------------------------------------

.label-text-wrapper {
  @include globals.typography(globals.$ion-body-sm-medium);

  /**
   * Label text should not extend
   * beyond the bounds of the select.
   * However, we do not set the max
   * width to 100% because then
   * only the label would show and users
   * would not be able to see what they are typing.
   */
  max-width: globals.$ion-scale-5000;

  transition: color globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive,
    transform globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive;

  color: globals.$ion-primitives-neutral-1000;
}

// Select Label Placement - Start & Fixed
// ----------------------------------------------------------------

:host(.select-label-placement-start) .label-text-wrapper,
:host(.select-label-placement-fixed) .label-text-wrapper {
  /**
   * The margin between the label and
   * the select should be on the end
   * when the label sits at the start.
   */
  @include globals.margin(0, globals.$ion-space-100, 0, 0);
}

:host(.select-label-placement-fixed) .label-text-wrapper {
  $text-wrapper-width: calc(globals.$ion-scale-2400 + globals.$ion-space-100);

  flex: 0 0 $text-wrapper-width;

  width: $text-wrapper-width;
  min-width: $text-wrapper-width;
  max-width: globals.$ion-scale-5000;
}

// Select Label Placement - End
// ----------------------------------------------------------------

:host(.select-label-placement-end) .label-text-wrapper {
  /**
   * The margin between the label and
   * the select should be on the start
   * when the label sits at the end.
   */
  @include globals.margin(0, 0, 0, globals.$ion-space-100);
}

// Select Label Placement - Stacked & Floating
// ----------------------------------------------------------------

:host(.select-label-placement-stacked) .label-text-wrapper,
:host(.select-label-placement-floating) .label-text-wrapper {
  /**
   * The margin between the label and
   * the select should be on the bottom
   * when the label sits at the top.
   */
  @include globals.margin(0, 0, globals.$ion-space-100, 0);
}

// Select Wrapper
// ----------------------------------------------------------------

.select-wrapper {
  min-width: globals.$ion-scale-5000;

  background: transparent;
}

.select-wrapper .select-placeholder {
  /**
   * When the floating label appears on top of the
   * select, we need to fade the text out so that the
   * label does not overlap with the placeholder.
   */
  transition: opacity globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive;
}

// Select Inner Wrapper
// ----------------------------------------------------------------

.select-wrapper-inner {
  @include globals.border-radius(var(--border-radius));
  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));

  position: relative;

  background: var(--background);

  box-sizing: border-box;

  gap: globals.$ion-space-200;
}

:host(.select-label-placement-stacked) .select-wrapper-inner,
:host(.select-label-placement-floating) .select-wrapper-inner {
  width: 100%;
}

// Select Native Wrapper
// ----------------------------------------------------------------

.native-wrapper {
  @include globals.typography(globals.$ion-body-md-regular);

  /**
   * When the floating label appears on top of the
   * input, we need to fade the input out so that the
   * label does not overlap with the placeholder.
   */
  transition: opacity globals.$ion-transition-time-150 globals.$ion-transition-curve-expressive;

  color: globals.$ion-text-default;
}

:host(.select-label-placement-stacked) .native-wrapper,
:host(.select-label-placement-floating) .native-wrapper {
  /**
   * Text should not extend beyond the bounds of the select.
   * This is done by setting the width to the full width minus
   * the icon width and the gap between the icon and the text.
   */
  width: calc(100% - globals.$ion-scale-400 - globals.$ion-space-200);
}

// Start/End Slots
// ----------------------------------------------------------------

/**
 * Slotted buttons have a lot of default padding that can
 * cause them to look misaligned from other pieces such
 * as the control's label, especially when using a clear
 * fill. We also make them circular to ensure that non-
 * clear buttons and the focus/hover state on clear ones
 * don't look too crowded.
 */
::slotted(ion-button[slot="start"].button-has-icon-only),
::slotted(ion-button[slot="end"].button-has-icon-only) {
  --border-radius: 50%;
  --padding-start: #{globals.$ion-space-200};
  --padding-end: #{globals.$ion-space-200};
  --padding-top: #{globals.$ion-space-200};
  --padding-bottom: #{globals.$ion-space-200};

  aspect-ratio: 1;
}

// Select Icon
// --------------------------------------------------

.select-icon,
::slotted(ion-icon) {
  width: globals.$ion-scale-400;
  height: globals.$ion-scale-400;
}

.select-icon {
  transition: transform 0.15s globals.$ion-transition-curve-expressive;
}

/**
 * This rotates the chevron icon
 * when the select is activated.
 * This should only happen on MD.
 */
:host(.select-expanded:not(.has-expanded-icon)) .select-icon {
  @include globals.transform(rotate(180deg));
}

.select-icon {
  color: globals.$ion-primitives-neutral-800;
}

// States
// ----------------------------------------------------------------

// Disabled
// ---------------------------------------------

:host(.select-disabled) {
  --background: #{globals.$ion-primitives-neutral-100};
  --border-color: #{globals.$ion-primitives-neutral-300};
}

:host(.select-disabled) .label-text-wrapper,
// Targets the text inside the select and the placeholder
:host(.select-disabled) .select-text,
:host(.select-disabled) .select-icon {
  color: globals.$ion-primitives-neutral-500;
}

// Shapes
// ----------------------------------------------------------------

:host(.select-shape-soft) {
  --border-radius: #{globals.$ion-border-radius-200};
}

:host(.select-shape-round) {
  --border-radius: #{globals.$ion-border-radius-400};
}

:host(.select-shape-rectangular) {
  --border-radius: #{globals.$ion-border-radius-0};
}

// Sizes
// ----------------------------------------------------------------

:host(.select-size-small) .select-wrapper-inner {
  height: globals.$ion-scale-1000;
}

:host(.select-size-medium) .select-wrapper-inner {
  height: globals.$ion-scale-1200;
}

:host(.select-size-large) .select-wrapper-inner {
  height: globals.$ion-scale-1400;
}