@use "../../themes/ionic/ionic.globals.scss" as globals;

// Select Fill: Outline (Ionic Theme)
// ----------------------------------------------------------------

:host(.ion-color) {
  --border-color: #{globals.current-color(base)};
}

// Select Bottom Content
// ----------------------------------------------------------------

:host(.select-fill-outline) .select-bottom {
  border-top: none;
}

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

:host(.select-fill-outline) .label-text-wrapper {
  /**
   * The label should appear on top of an outline
   * container that overlaps it so it is always clickable.
   */
  position: relative;
}

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

:host(.select-fill-outline) .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));

  /**
  * Apply the background to the native select
  * wrapper to only style the select.
  */
  background: var(--background);
}

// Outline Container
// ----------------------------------------------------------------

:host(.select-fill-outline) .select-outline {
  @include globals.position(0, 0, 0, 0);
  @include globals.border-radius(var(--border-radius));

  position: absolute;

  width: 100%;
  height: 100%;

  pointer-events: none;

  border: var(--border-width) var(--border-style) var(--border-color);

  box-sizing: border-box;
}

// Focus
// ---------------------------------------------

:host(.ion-focused.select-fill-outline) {
  --border-color: var(--highlight-color);
}

:host(.ion-focused.select-fill-outline:not(.ion-invalid):not(.ion-valid)) {
  --border-width: #{globals.$ion-border-size-050};
}

/**
 * If the select has a validity state, the
 * border should reflect that as a color.
 */
:host(.has-focus.select-fill-outline.ion-valid),
:host(.select-fill-outline.ion-touched.ion-invalid) {
  --border-color: var(--highlight-color);
}