_form.scss

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

@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
  $firstIconSize: $euiFormControlPadding + $euiSize + $euiFormControlPadding;
  $secondIconSize: $euiFormControlPadding + $euiSize;

  @if ($compressed) {
    $firstIconSize: $euiFormControlCompressedPadding + $euiSize + $euiFormControlCompressedPadding;
    $secondIconSize: $euiFormControlCompressedPadding + $euiSize;
  }

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

@mixin euiFormControlLayoutClearIcon($iconClass) {
  $clearSize: $euiSize;
  @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($euiSizeS);
    fill: $euiColorEmptyShade;
    stroke: $euiColorEmptyShade;
    stroke-width: 2px; // increase thickness of icon at such a small size
  }
}

@mixin euiPlaceholderPerBrowser {
  // sass-lint:disable-block no-vendor-prefixes
  // Each prefix must be its own content block
  &::-webkit-input-placeholder { @content; }
  &::-moz-placeholder { @content; }
  &:-ms-input-placeholder { @content; }
  &:-moz-placeholder { @content; }
  &::placeholder { @content; }
}

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

@mixin euiFormControlText {
  @include euiFont;
  font-size: $euiFontSizeS;
  line-height: 1em; // fixes text alignment in IE
  color: $euiTextColor;

  // sass-lint:disable-block mixins-before-declarations
  @include euiPlaceholderPerBrowser {
    color: $euiColorDarkShade;
  }
}

@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,
    #{&}-isLoading#{&}--compressed {
      @if ($isNextToIcon) {
        @include euiFormControlLayoutPadding(2);
      } @else {
        @include euiFormControlLayoutPadding(1);
      }
    }
  }
}

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

@mixin euiFormControlDefaultShadow($borderOnly: false) {
  // sass-lint:disable-block indentation
  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) { // sass-lint:disable-line no-vendor-prefixes
    // List *must* be in the same order as the above.
    transition-property: box-shadow, background-image, background-size;
  }
}

@mixin euiFormControlFocusStyle($borderOnly: false) {
  // sass-lint:disable-block indentation, empty-args
  background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
  background-image: euiFormControlGradient();
  background-size: 100% 100%; // 1

  @if ($borderOnly) {
    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
  } @else {
    box-shadow:
      0 1px 1px -1px transparentize($euiShadowColor, .8),
      0 4px 4px -2px transparentize($euiShadowColor, .8),
      inset 0 0 0 1px $euiFormBorderColor;
  }
}

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

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

  // sass-lint:disable-block mixins-before-declarations
  @include euiPlaceholderPerBrowser {
    color: $euiFormControlDisabledColor;
  }
}

@mixin euiFormControlReadOnlyStyle {
  cursor: default;
  // 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: 0;
  padding: $euiFormControlPadding;

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

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

    &:disabled {
      @include euiFormControlDisabledStyle;
    }

    &[readOnly] {
      @include euiFormControlReadOnlyStyle;
    }

    // Needs to be set for autofill
    // sass-lint:disable-block no-vendor-prefixes
    &:-webkit-autofill {
      -webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);

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

  }

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

    &--inGroup {
      // sass-lint:disable-block 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) {
  @include euiSlightShadow;

  @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: $euiBorderRadius;
  }
  // sass-lint:disable-block indentation
  transition: background-color $euiAnimSpeedFast ease-in,
              border-color $euiAnimSpeedFast ease-in;
}

@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 {
  @include euiFocusRing;
  border-color: $euiColorPrimary;
}

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