:root {
  --input-line-height: 1.25;
}

:where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  line-height: var(--input-line-height);
  outline: 0;
  width: auto;
  padding-block: 0.3125rem;
  padding-inline: 0.75rem;
  margin-block-end: 0.3125rem;
  background: var(--field);
  color: var(--field-text);
  border: var(--border-size-1) solid var(--gray-text);
  border-radius: var(--radius-2);
  box-shadow: none;
  accent-color: var(--accent-color);

  &[type="search"] {
    border-radius: var(--radius-3);
  }

  &[type="file"] {
    border: none;
    margin: 0;
    padding: 0;
  }

  .with-icon:has(&) {
    position: relative;
    margin-block-end: 0.3125rem;

    input,
    select,
    textarea {
      margin-block-end: 0;
      padding-inline-end: 1.75rem;
    }

    svg {
      position: absolute;
      /* top: 0.3rem; */
      right: 0.5rem;

      * {
        stroke: var(--gray-text);
        stroke-width: 2px;
      }
    }

    &:focus-within svg * {
      stroke: var(--accent-color);
    }
  }

  &:focus {
    border-color: var(--accent-color);
  }
}