@import "./input";
@import "./input.ios.vars";

:host {
  --border-width: #{$hairlines-width};
  --border-color: #{$item-ios-border-color};

  font-size: $input-ios-font-size;
}

// TODO FW-2764 Remove this
:host(.legacy-input) {
  --padding-top: #{$input-ios-padding-top};
  --padding-end: #{$input-ios-padding-end};
  --padding-bottom: #{$input-ios-padding-bottom};
  --padding-start: #{$input-ios-padding-start};
}

:host-context(.item-label-stacked),
:host-context(.item-label-floating) {
  --padding-top: 8px;
  --padding-bottom: 8px;
  --padding-start: 0px;
}

.input-clear-icon ion-icon {
  width: 18px;
  height: 18px;
}

// Input - Disabled
// ----------------------------------------------------------------
// The input, label, helper text, char counter and placeholder
// should use the same opacity and match the other form controls

:host(.legacy-input) .native-input[disabled],
:host(.input-disabled) {
  opacity: #{$input-ios-disabled-opacity};
}

// 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: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;

  aspect-ratio: 1;
}