@include field-input {
  display: flex;
  // border: 1px solid red;
  input,
  textarea,
  select,
  #{$option} {
    font-size: 1em;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    flex-basis: 100%;
    padding: var(--input-padding);
    color: var(--input-text);
    background-color: var(--input-back);
    border: var(--input-border-width) solid var(--input-border);
    border-radius: var(--input-border-radius);
    transition: 0.3s all;
    outline: none !important;
    &:hover {
      border-color: var(--focus-border);
      color: var(--focus-text);
    }
  }
  input,
  textarea,
  select {
    min-width: 0;
    &::placeholder {
      color: var(--placeholder-text);
      font-weight: 300;
    }
  }
  input,
  select,
  #{$option} {
    align-items: center;
    max-height: var(--input-max-height);
  }
  textarea {
    line-height: 1.25;
  }
  select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance : none;
    font-size: 1em;
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  ::placeholder {
    color: blue;
  }
  select:invalid,
  select option:disabled,
  select option:invalid {
    color: var(--placeholder-text);
  }
  input[type=checkbox],
  input[type=radio],
  input[type=range] {
    accent-color: var(--accent-color);
    margin-left: 0;
  }
  input[type=color] {
    padding: 0;
    height: calc(1em + (var(--input-padding-y) * 2));
    //&::-webkit-color-swatch,
    //&::-moz-color-swatch {
    //  //height: 1em;
    //  //height: 32px !important;
    //  //appearance: none;
    //  //line-height: 1;
    //}
  }
  input[type=date] {
    max-height: var(--input-max-height);
  }
  #{$option} {
    cursor: pointer;
  }
  &#{$radio} {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: var(--option-margin);
  }
  &#{$radio} label#{$option},
  &#{$checkbox} label#{$option} {
    width: 100%;
    input {
      flex-basis: 1em;
    }
    span {
      flex-basis: 100%;
    }
  }
  &#{$prefixed},
  &#{$suffixed} {
    border-radius: var(--input-border-radius);
  }
  &#{$prefixed} {
    input,
    textarea,
    select,
    #{$option} {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  &#{$suffixed} {
    input,
    textarea,
    select,
    #{$option} {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  #{$prefix},
  #{$suffix} {
    transition: 0.3s all;
    font-size: 1em;
    line-height: 1;
    padding: var(--prefix-padding);
    border-radius: var(--input-border-radius);
    border: var(--input-border-width) solid var(--prefix-border);
    background-color: var(--prefix-back);
    color: var(--prefix-text);
    user-select: none;
    z-index: 99;
  }
  #{$prefix} {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  #{$suffix} {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}