input {
  &[type='text'],
  &[type='password'],
  &[type='color'],
  &[type='date'],
  &[type='datetime-local'],
  &[type='datetime'],
  &[type='email'],
  &[type='month'],
  &[type='number'],
  &[type='search'],
  &[type='tel'],
  &[type='time'],
  &[type='url'],
  &[type='week'],
  &[type='datalist'] {
    appearance: none;
    border: 1px solid var(--color-grey-60);
    border-radius: var(--size-4);
    box-shadow: none;
    min-height: 42px;
    padding: var(--size-8) var(--size-16);
    transition: box-shadow 0.3s, outline-offset 0.25s ease;
    width: 100%;

    @media screen and (prefers-reduced-motion: reduce) {
      transition: none;
    }

    &::placeholder {
      color: var(--color-grey-30);
    }

    &:hover {
      border-color: var(--color-grey-60);
      box-shadow: 0 0 0 1px var(--color-grey-60);
    }

    &:active,
    &:focus {
      border-color: var(--color-black);
      box-shadow: 0 0 0 2px var(--color-black);

      &::placeholder {
        color: transparent;
      }
    }

    + p {
      margin-top: var(--size-8);
    }
  }

  // Sets explicit sizing for the colour picker input type

  &[type='color'] {
    background-color: var(--color-white);
    min-width: var(--size-64);

    &::-webkit-color-swatch {
      border: none;
      border-radius: var(--size-2);
    }
  }

  // Sets explicit sizing for the file input type

  &[type='file'] {
    background: none;
    margin: 0;
    padding: 0;

    &::file-selector-button {
      margin-right: var(--size-8);
    }

    &:hover {
      background: none;
    }
  }

  // Sets explicit styling for the number input

  &[type='number'] {
    appearance: textfield;
  }

  // Re-enables the -webkit- search pseudo elements

  &[type='search'] {
    &::-webkit-search-cancel-button,
    &::-webkit-searchfield-cancel-button {
      appearance: searchfield-cancel-button;
    }
  }

  &[type='checkbox'],
  &[type='radio'] {
    // stylelint-disable-next-line suitcss/custom-property-no-outside-root
    --border-color: var(--color-grey-60);

    appearance: none;
    border: none;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    height: var(--size-24);
    margin-right: var(--size-8);
    position: relative;
    transition: box-shadow 0.3s;
    vertical-align: bottom;
    width: var(--size-24);

    @media screen and (prefers-reduced-motion: reduce) {
      transition: none;
    }

    &::before {
      background-color: var(--color-black);
      border-radius: 50%;
      content: '';
      display: block;
      height: var(--size-16);
      left: 50%;
      opacity: 0;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 0.3s, visibility 0.3s, width 0.3s, height 0.3s;
      visibility: hidden;
      width: var(--size-16);

      @media screen and (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }

    &:hover {
      // stylelint-disable-next-line suitcss/custom-property-no-outside-root
      --border-color: var(--color-grey-60);

      box-shadow: 0 0 0 1px var(--color-grey-60);
      @media screen and (prefers-reduced-motion: reduce) {
        &::before {
          opacity: 0.1;
          transition: none;
          visibility: visible;
        }
      }

      &::before {
        opacity: 0.1;
        transition: opacity 0.3s, visibility 0.3s;
        visibility: visible;
      }
    }

    &:active,
    &:focus {
      // stylelint-disable-next-line suitcss/custom-property-no-outside-root
      --border-color: var(--color-black);

      box-shadow: 0 0 0 2px var(--color-black);
    }

    &:checked {
      // stylelint-disable-next-line suitcss/custom-property-no-outside-root
      --border-color: var(--color-black);

      box-shadow: 0 0 0 2px var(--border-color);
      @media screen and (prefers-reduced-motion: reduce) {
        &::before {
          opacity: 1;
          transition: none;
          visibility: visible;
        }
      }

      &::before {
        opacity: 1;
        transition: opacity 0.3s, visibility 0.3s;
        visibility: visible;
      }
    }
  }

  &[type='checkbox'] {
    border-radius: var(--size-4);

    &::before {
      border-radius: var(--size-2);
      color: var(--color-white);
      content: '\2713';
      line-height: var(--size-16);
      text-align: center;
    }

    &:checked {
      box-shadow: 0 0 0 1px var(--border-color);

      &::before {
        border-radius: var(--size-4);
        height: var(--size-24);
        left: -1px;
        line-height: var(--size-24);
        top: -1px;
        transform: translate(0, 0);
        width: var(--size-24);
      }
    }
  }

  &[type='button'],
  &[type='reset'],
  &[type='submit'] {
    appearance: none;
  }
}