form {
  #{text-inputs()},
  textarea {
    border-radius: $form-input-border-radius;
    border: $form-input-border-width solid $form-input-border-color;
    width: 100%;
    line-height: $form-input-height;
    padding: 0 $form-input-padding 0 $form-input-padding;
    height: $form-input-height;
    &:focus {
      border: $form-input-border-width * 2 solid $form-input-border-color-active;
    }
  }

  #{text-inputs()},
  textarea,
  select {
    &:disabled {
      background: $disabled-background-color;
      border: 1px solid  $disabled-border-color;
      color: $disabled-font-color;
    }
  }
}

%form-row-text {
  position: relative;
  display: flex;
  flex-direction: column;

  input,
  textarea {
    border-radius: $form-input-border-radius;
    border: $form-input-border-width solid $form-input-border-color;
    width: 100%;
    line-height: $form-input-height;
    padding: 0 $form-input-padding 0 $form-input-padding;
    height: $form-input-height;
    transition: all 0.1s ease-in-out;
    caret-color: $form-input-border-color-active;
  }

  input {
    height: $form-input-height;
  }

  textarea {
    height: auto;
    padding-top: $form-input-padding;
  }

  label {
    position: absolute;
    cursor: text;
    line-height: 4rem;
    top: -13px;
    transition: color, line-height 0.2s ease-in-out;
    width: 100%;
    display: flex;

    &:after,
    &:before {
      border: $form-input-border-width solid transparent;
      border-top: $form-input-border-width solid $form-input-border-color;
      content: "";
      display: block;
      box-sizing: border-box;
      flex-grow: 1;
      transition: box-shadow 0.1s ease-in-out;
    }

    &:after {
      margin: 13px 0 0 4px;
      border-radius: 0 $form-input-border-radius;
    }

    &:before {
      max-width: 8px;
      margin: 13px 4px 0 0;
      border-radius: $form-input-border-radius 0;
    }
  }

  input::-webkit-datetime-edit,
  input::-webkit-calendar-picker-indicator,
  input::-webkit-clear-button,
  input::-webkit-inner-spin-button {
    visibility: hidden;
  }

  input::placeholder {
    text-align: right;
    font-style: italic;
    font-size: $small-font;
  }

  input::-ms-input-placeholder,input::-webkit-input-placeholder {
    text-align: right;
    font-style: italic;
    font-size: $small-font;
  }

  &.active,
  &.filled {
    input,
    textarea {
      border-top-color: transparent;
    }

    label {
      line-height: 1.5em;

      &:after,
      &:before {
        border-top: $form-input-border-width solid $form-input-border-color;
      }
    }

    input::-webkit-datetime-edit,
    input::-webkit-calendar-picker-indicator,
    input::-webkit-clear-button,
    input::-webkit-inner-spin-button {
      visibility: visible;
    }
  }

  &.active:not(.field-with-errors) {
    input,
    textarea {
      border-color: $form-input-border-color-active;
      border-top-color: transparent;
      box-shadow: inset 1px -1px 0 0 $form-input-border-color-active,
        inset -1px 0 0 0 $form-input-border-color-active;
    }

    label {
      color: $form-input-border-color-active;
      &:after,
      &:before {
        border-top: $form-input-border-width solid $form-input-border-color-active;
        box-shadow: inset 0 1px 0 0 $form-input-border-color-active;
      }
    }
  }

  label abbr {
    border: none;
    text-decoration: none;
    padding-right: 0.2em;
    cursor: inherit;
  }
}

%form-row {
  select {
    border-radius: $form-input-border-radius;
    border: $form-input-border-width solid $form-input-border-color;
    height: $form-input-height;
    padding: 0 20px 0 $form-input-padding;
    background-color: inherit;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28102, 102, 102%29'></polygon></svg>");
    background-size: 9px 6px;
    background-position: right -15px center;
    background-repeat: no-repeat;
    background-origin: content-box;
    width: 100%;
  }

  select, input

  label {
    cursor: default;

    & + select {
      display: block;
      margin-top: $form-row-spacing / 2;
    }

    & abbr {
      border: none;
      text-decoration: none;
      padding-right: 0.2em;
      cursor: inherit;
    }
  }

  .radio-button {
    &.inline {
      display: inline-block;
    }

    input[type="radio"] {
      display: none;
      &:checked + label:before {
        border-color: $form-input-border-color;
        animation: radio-ripple 0.2s linear forwards;
      }
      &:checked + label:after {
        transform: scale(1);
      }
    }

    label {
      display: inline-block;
      height: $radio-size;
      position: relative;
      padding: 0 ($radio-size + 0.5rem);
      margin-bottom: 0;
      cursor: pointer;
      vertical-align: bottom;

      &:before,
      &:after {
        position: absolute;
        content: "";
        border-radius: 50%;
        transition: all 0.3s ease;
        transition-property: transform, border-color;
      }

      &:before {
        left: 0;
        top: 0;
        width: $radio-size;
        height: $radio-size;
        border: 2px solid $form-input-border-color;
      }

      &:after {
        top: $radio-size / 2 - $radio-checked-size / 2;
        left: $radio-size / 2 - $radio-checked-size / 2;
        width: $radio-checked-size;
        height: $radio-checked-size;
        transform: scale(0);
        background: $form-input-border-color-active;
      }
    }
  }
}

%form-errors {
  &.active, &.filled {
    input {
      border-top-color: transparent;
    }
  }
  input {
    border-color: system-color(error);
  }
  label:after, label:before {
    border-top: 1px solid system-color(error);
  }
  label, span {
    color: system-color(error);
  }
}