select.md.scss

@import "./select";
@import "./select.md.vars";
@import "./select.md.solid.scss";
@import "./select.md.outline.scss";

// Material Design Select
// --------------------------------------------------

:host {
  --border-width: 1px;
  --border-color: #{$item-md-border-color};
}

// TODO FW-3194 - Remove this
:host(.legacy-select) {
  --padding-top: #{$select-md-padding-top};
  --padding-end: #{$select-md-padding-end};
  --padding-bottom: #{$select-md-padding-bottom};
  --padding-start: #{$select-md-padding-start};
}

// TODO FW-3194 - Move this to host
:host(:not(.legacy-select)) {
  min-height: 56px;
}

.select-icon {
  width: $select-md-icon-size;

  transition: transform .15s cubic-bezier(.4, 0, .2, 1);

  color: #{$text-color-step-500};
}

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

/**
 * When the select is focused the label should
 * take on the highlight color. This should
 * only apply to floating or stacked labels.
 */
:host(.select-label-placement-floating.select-expanded) .label-text-wrapper,
:host(.select-label-placement-floating.ion-focused) .label-text-wrapper,
:host(.select-label-placement-stacked.select-expanded) .label-text-wrapper,
:host(.select-label-placement-stacked.ion-focused) .label-text-wrapper {
  color: var(--highlight-color);
}

:host(.has-focus.select-label-placement-floating.ion-valid) .label-text-wrapper,
:host(.select-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,
:host(.has-focus.select-label-placement-stacked.ion-valid) .label-text-wrapper,
:host(.select-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper {
  color: var(--highlight-color);
}

// Select Highlight
// ----------------------------------------------------------------

.select-highlight {
  @include position(null, null, -1px, 0);

  position: absolute;

  width: 100%;
  height: 2px;

  transform: scale(0);

  transition: transform 200ms;

  background: var(--highlight-color);
}

:host(.select-expanded) .select-highlight,
:host(.ion-focused) .select-highlight {
  transform: scale(1);
}

/**
 * Adjust the highlight up by 1px
 * so it is not cut off by the
 * the item's line (if one is present).
 */
:host(.in-item) .select-highlight {
  @include position(null, null, 0, 0);
}

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

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

/**
 * When the select is focused the icon should
 * take on the highlight color.
 * The icon should also take on the highlight
 * color if there is a validation state.
 */
:host(.select-expanded) .select-wrapper .select-icon,
:host(.has-focus.ion-valid) .select-wrapper .select-icon,
:host(.ion-touched.ion-invalid) .select-wrapper .select-icon,
:host(.ion-focused) .select-wrapper .select-icon {
  color: var(--highlight-color);
}

/**
 * Adjust the arrow so that it appears in the middle
 * of the item. If the item has fill="outline" then
 * we should adjust the entire ion-select rather than
 * just the outline so the selected value appears centered too.
 */
:host-context(.item-label-stacked) .select-icon,
:host-context(.item-label-floating:not(.item-fill-outline)) .select-icon,
:host-context(.item-label-floating.item-fill-outline) {
  @include transform(translate3d(0, -9px, 0));
}

:host-context(.item-has-focus):host(:not(.has-expanded-icon)) .select-icon {
  @include transform(rotate(180deg));
}

/**
 * Ensure that the translation we did
 * above is preserved when we rotate the select icon.
 */
:host-context(.item-has-focus.item-label-stacked):host(:not(.has-expanded-icon)) .select-icon,
:host-context(.item-has-focus.item-label-floating:not(.item-fill-outline)):host(:not(.has-expanded-icon)) .select-icon {
  @include transform(rotate(180deg), translate3d(0, -9px, 0));
}

// Select Shape Rounded
// ----------------------------------------------------------------

:host(.select-shape-round) {
  --border-radius: 16px;
}

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

:host(.select-label-placement-stacked) .native-wrapper,
:host(.select-label-placement-floating) .native-wrapper {
  width: calc(100% - $select-md-icon-size - $select-icon-margin-start);
}

// Select: Disabled
// ----------------------------------------------------------------
// The select and label should use the
// same opacity and match the other form
// controls

:host(.select-disabled) {
  opacity: $select-md-disabled-opacity;
}