#form() {
  .el() {
    display: block;
    border-width: var(--form-control-borderWidth);
    border-style: solid;
    border-color: var(--form-control-borderColor-base);
    border-radius: var(--form-control-borderRadius);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    color: var(--form-control-color-base);
    padding-top: ~"calc(var(--form-control-padding-vertical) - var(--form-control-borderWidth))";
    padding-right: ~"calc(var(--form-control-padding-horizontal) - var(--form-control-borderWidth))";
    padding-bottom: ~"calc(var(--form-control-padding-vertical) - var(--form-control-borderWidth))";
    padding-left: ~"calc(var(--form-control-padding-horizontal) - var(--form-control-borderWidth))";
    width: 100%;
    appearance: none;
    min-height: ~"calc(var(--common-lineHeight-base) + var(--form-control-padding-vertical) * 2)";
    background-color: var(--form-control-backgroundColor-base);
    transition-duration: var(--common-animationDuration-primary);
    transition-timing-function: var(--common-animationTimingFunction-primary);
    transition-property+: box-shadow, color, border-color, background-color;

    &:focus,
    &:focus-within {
      --form-control-backgroundColor-base: var(--form-control-backgroundColor-focus) !important;
      --form-control-borderColor-base: var(--form-control-borderColor-focus) !important;

      outline: none;
      box-shadow: 0 0 0 2px var(--form-control-outlineColor-focus);
    }

    body:not(.mobile) &:not([disabled]):hover {
      --form-control-backgroundColor-base: var(--form-control-backgroundColor-hover);
      --form-control-borderColor-base: var(--form-control-borderColor-hover);
    }

    &:not(:focus):invalid {
      box-shadow: none;
      outline: none;
    }

    &::placeholder {
      color: var(--form-control-placeholderColor);
      opacity: 1;
    }

    .form__item--slip & {
      padding-top: ~"calc(var(--form-control-padding-vertical) - var(--form-control-borderWidth) + var(--common-lineHeight-small))";
      min-height: ~"calc(var(--common-lineHeight-base) + var(--form-control-padding-vertical) * 2 + var(--common-lineHeight-small))";

      &::placeholder {
        opacity: 0;
        transition-timing-function: var(--common-animationTimingFunction-primary);
        transition-duration: var(--common-animationDuration-primary);
        transition-property: opacity;
      }

      &:focus::placeholder {
        opacity: 1;
      }
    }

    &--danger {
      --form-control-backgroundColor-base: var(--form-control-backgroundColor-danger) !important;
      --form-control-borderColor-base: var(--form-control-borderColor-danger) !important;

      &:focus {
        --form-control-backgroundColor-base: var(--form-control-backgroundColor-danger) !important;
        --form-control-borderColor-base: var(--form-control-borderColor-danger) !important;

        box-shadow: 0 0 0 2px var(--form-control-outlineColor-danger) !important;
      }
    }
  }

  .input() {
    #form.el();

    &::-ms-clear,
    &::-ms-reveal {
      display: none;
    }

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      display: none;
    }

    &[type="number"] {
      appearance: textfield;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        appearance: none;
      }
    }
  }

  .select() {
    @icon: escape('<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="@{form-control-placeholderColor}"><path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/></svg>');

    #form.el();
    cursor: pointer;
    padding-right: ~"calc(var(--form-control-padding-horizontal) - 1px + 24px)";
    background-image: url("data:image/svg+xml, @{icon}");
    background-repeat: no-repeat;
    background-position: right ~"calc(var(--form-control-padding-horizontal) - 1px)" top 55%;
    background-size: 24px 24px;

    &:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 #000;
    }

    &::-ms-expand {
      display: none;
    }
  }

  .textarea() {
    #form.el();
    resize: vertical;
  }
}