_form.scss

// Labels
@mixin euiFormLabel {
  @include euiFontSizeXS;
  @include euiTextBreakWord;
  color: $euiTitleColor;
  font-weight: $euiFontWeightSemiBold;
}

@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
  $iconSize: $euiSize;
  $iconPadding: $euiFormControlPadding;
  $marginBetweenIcons: $euiFormControlPadding / 2;

  @if ($compressed) {
    $iconPadding: $euiFormControlCompressedPadding;
  }

  @if variable-exists(numOfIcons) == false {
    @error '$numOfIcons:integer (1-3) must be provided to @mixin euiFormControlLayoutPadding().';
  } @else if $numOfIcons == 1 {
    padding-#{$side}: $iconPadding + $iconSize + $iconPadding;
  } @else if $numOfIcons == 2 {
    padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
  } @else if $numOfIcons == 3 {
    padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
  }
}

@mixin euiFormControlLayoutClearIcon($iconClass, $size: 'm') {
  $clearSize: $euiSize;
  $clearIconStroke: 2px;

  @if ($size == 's') {
    $clearSize: $euiSizeM;
    $clearIconStroke: $euiSizeXS;
  }

  @include size($clearSize);
  pointer-events: all;
  background-color: lightOrDarkTheme($euiColorMediumShade, $euiColorDarkShade);
  border-radius: $clearSize;
  line-height: 0; // ensures the icon stays vertically centered

  &:focus {
    @include euiFocusRing;
  }

  #{$iconClass} {
    @include size($clearSize / 2);
    fill: $euiColorEmptyShade;
    // increase thickness of icon at such a small size
    stroke: $euiColorEmptyShade;
    stroke-width: $clearIconStroke;
  }
}

@mixin euiPlaceholderPerBrowser {
  // stylelint-disable selector-no-vendor-prefix
  // Each prefix must be its own content block
  &::-webkit-input-placeholder { @content; opacity: 1; }
  &::-moz-placeholder { @content; opacity: 1; }
  &:-ms-input-placeholder { @content; opacity: 1; }
  &:-moz-placeholder { @content; opacity: 1; }
  &::placeholder { @content; opacity: 1; }
}

@function euiFormControlGradient($color: $euiColorPrimary) {
  @return linear-gradient(to top,
    $color,
    $color 2px,
    transparent 2px,
    transparent 100%
  );
}

@mixin euiFormControlText {
  @include euiFont;
  font-size: $euiFontSizeS;
  color: $euiTextColor;

  @include euiPlaceholderPerBrowser {
    color: $euiFormControlPlaceholderText;
  }
}

@mixin euiFormControlSize(
  $height: $euiFormControlHeight,
  $includeAlternates: false
) {
  // Default
  max-width: $euiFormMaxWidth;
  width: 100%;
  height: $height;

  @if ($includeAlternates) {
    &--fullWidth {
      max-width: 100%;
    }

    &--compressed {
      height: $euiFormControlCompressedHeight;
    }

    &--inGroup {
      height: 100%;
    }
  }
}

@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) {
  @if ($isIconOptional) {
    @at-root {
      #{&}--withIcon {
        @include euiFormControlLayoutPadding(1, $side, $compressed);
      }
    }
  } @else {
    @include euiFormControlLayoutPadding(1, $side, $compressed);
  }
}

@mixin euiFormControlIsLoading($isNextToIcon: false) {
  @at-root {
    #{&}-isLoading {
      @if ($isNextToIcon) {
        @include euiFormControlLayoutPadding(2);
      } @else {
        @include euiFormControlLayoutPadding(1);
      }
    }

    #{&}-isLoading#{&}--compressed {
      @if ($isNextToIcon) {
        @include euiFormControlLayoutPadding(2, $compressed: true);
      } @else {
        @include euiFormControlLayoutPadding(1, $compressed: true);
      }
    }
  }
}

// 1. Must supply both values to background-size or some browsers apply the single value to both directions

@mixin euiFormControlDefaultShadow($borderOnly: false) {
  background-color: $euiFormBackgroundColor;
  background-repeat: no-repeat;
  background-size: 0% 100%; // 1

  @if ($borderOnly) {
    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
  } @else {
    box-shadow:
      #{$euiFormControlBoxShadow},
      inset 0 0 0 1px $euiFormBorderColor;
  }

  transition:
    box-shadow $euiAnimSpeedFast ease-in,
    background-image $euiAnimSpeedFast ease-in,
    background-size $euiAnimSpeedFast ease-in,
    background-color $euiAnimSpeedFast ease-in;

  // Fixes bug in Firefox where adding a transition to the background-color
  // caused a flash of differently styled dropdown.
  @supports (-moz-appearance: none) {
    // List *must* be in the same order as the above.
    transition-property: box-shadow, background-image, background-size;
  }
}

@mixin euiFormControlFocusStyle($borderOnly: false) {
  background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
  background-image: euiFormControlGradient();
  background-size: 100% 100%; // 1
  outline: none; // Blanket remove all outlines relying on our own bottom border

  @if ($borderOnly) {
    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
  } @else {
    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
  }
}

@mixin euiFormControlInvalidStyle {
  background-image: euiFormControlGradient($euiColorDanger);
  background-size: 100%;
}

@mixin euiFormControlDisabledTextStyle {
  color: $euiFormControlDisabledColor;
  -webkit-text-fill-color: $euiFormControlDisabledColor; // Required for Safari
}

@mixin euiFormControlDisabledStyle {
  @include euiFormControlDisabledTextStyle;
  cursor: not-allowed;
  background: $euiFormBackgroundDisabledColor;
  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;

  @include euiPlaceholderPerBrowser {
    color: $euiFormControlDisabledColor;
  }
}

@mixin euiFormControlReadOnlyStyle {
  cursor: default;
  color: $euiTextColor;
  -webkit-text-fill-color: $euiTextColor; // Required for Safari
  // Use transparency since there is no border and in case form is on a non-white background
  background: $euiFormBackgroundReadOnlyColor;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
}

// 2. Override invalid state with focus state.

@mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) {
  @include euiFormControlSize($includeAlternates: $includeSizes);
  @include euiFormControlDefaultShadow;
  @include euiFormControlText;

  border: none;
  border-radius: $euiFormControlBorderRadius;
  padding: $euiFormControlPadding;

  @if ($includeStates) {
    &:invalid { // 2
      @include euiFormControlInvalidStyle;
    }

    &:focus { // 2
      @include euiFormControlFocusStyle;
    }

    &:disabled {
      @include euiFormControlDisabledStyle;
    }

    &[readOnly] {
      @include euiFormControlReadOnlyStyle;
    }

    // Needs to be set for autofill
    &:-webkit-autofill {
      -webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);

      ~ .euiFormControlLayoutIcons {
        color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
      }
    }
  }

  @if ($includeSizes) {
    &--compressed {
      @include euiFormControlStyleCompressed($borderOnly, $includeStates);
    }

    &--inGroup {
      // stylelint-disable-next-line declaration-no-important
      box-shadow: none !important;
      border-radius: 0;
    }
  }
}

@mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
  @include euiFormControlDefaultShadow($borderOnly: true);
  padding: $euiFormControlCompressedPadding;
  border-radius: $euiFormControlCompressedBorderRadius;

  @if ($includeStates) {
    &:invalid { // 2
      @include euiFormControlInvalidStyle;
    }

    &:focus { // 2
      @include euiFormControlFocusStyle($borderOnly: true);
    }

    &:disabled {
      @include euiFormControlDisabledStyle;
    }

    &[readOnly] {
      @include euiFormControlReadOnlyStyle;
    }
  }
}

// Custom styles and states for checkboxes and radios

@mixin euiCustomControl($type: null, $size: $euiSize) {
  @if $size {
    $size: $size - 2px; // subtract 2px from size to account for border size
    padding: $size / 2;
  }

  border: 1px solid $euiFormCustomControlBorderColor;
  background: $euiColorEmptyShade no-repeat center;

  @if $type == 'round' {
    border-radius: $size;
  } @else if $type == 'square' {
    border-radius: $euiCheckboxBorderRadius;
  }

  transition: background-color $euiAnimSpeedFast ease-in,
              border-color $euiAnimSpeedFast ease-in; // stylelint-disable-line indentation
}

@mixin euiCustomControlSelected($type: null) {
  border-color: $euiColorPrimary;
  background-color: $euiColorPrimary;

  @if $type != null {
    @include euiIconBackground($type, $euiColorEmptyShade);
  }
}

@mixin euiCustomControlDisabled($type: null) {
  border-color: $euiColorLightShade;
  background-color: $euiColorLightShade;
  box-shadow: none;
  @if $type != null {
    @include euiIconBackground($type, $euiFormCustomControlDisabledIconColor);
  }
}

@mixin euiCustomControlFocused($amsterdamSelector: null) {
  // Requires a selector to work with the Amsterdam outline styles
  @if ($amsterdamSelector) {
    + #{$amsterdamSelector} {
      outline: $euiFocusRingSize solid $euiFocusRingColor;
      outline-offset: 2px;
    }

    // Chrome
    &:focus-visible + #{$amsterdamSelector} {
      outline: $euiFocusRingSize solid $euiFocusRingColor;
      outline-offset: 2px;
    }

    &:not(:focus-visible) + #{$amsterdamSelector} {
      outline: none;
    }
  } @else {
    // Default theme
    @include euiFocusRing('small', 'outer');
    border-color: $euiColorPrimary;
  }
}

@mixin euiHiddenSelectableInput {
  position: absolute;
  // stylelint-disable-next-line declaration-no-important
  opacity: 0 !important; // Make sure it's still hidden when :disabled
  width: 100%;
  height: 100%;
  cursor: pointer;
}

// Adjusts form controls border radius
@mixin euiFormControlSideBorderRadius($borderRadius, $side, $internal: false) {
  @if $internal == true {
    $borderRadius: $borderRadius - 1;
  }
  @if $side == 'left' {
    border-radius: $borderRadius 0 0 $borderRadius;
  } @else if $side == 'right' {
    border-radius: 0 $borderRadius $borderRadius 0;
  }
}