@use "../../variables/units";
@use "../../variables/colors";
@use "../../variables/scaffolding";
@use "../../variables/typography";
@use "../../utilities";

@use "form-control.variables" as form-control-variables;

@mixin root() {
  display: block;
  inline-size: 100%;
  block-size: form-control-variables.$block-size;
  padding-block: units.$padding-base-block;
  padding-inline: (units.$padding-base-inline + 2);
  font-size: typography.$root-font-size-base;
  line-height: typography.$line-height-base;
  color: colors.$input-color;
  background-color: colors.$input-bg;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: form-control-variables.$border-width solid colors.$input-border;
  border-radius: form-control-variables.$input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
  transition:
    border-color ease-in-out 0.15s,
    box-shadow ease-in-out 0.15s;

  @include utilities.placeholder(colors.$input-color-placeholder);

  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }

  &:focus {
    border-color: form-control-variables.$focus-border-color;
    outline: 0;
    box-shadow: inset 0 0 0 form-control-variables.$focus-border-width form-control-variables.$focus-border-color;
  }

  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    background-color: colors.$input-bg-disabled;
    opacity: 1;
  }

  &[disabled],
  fieldset[disabled] & {
    cursor: scaffolding.$cursor-disabled;
  }

  &[disabled] {
    border-color: colors.$input-disabled-border-color;
    color: colors.$input-disabled-color;
  }

  &[readonly] {
    border-width: form-control-variables.$readonly-border-width;
  }

  &[type="text"] {
    line-height: form-control-variables.$block-size;
  }

  &[size] {
    inline-size: auto;
  }
}