form {
  max-width: 100%;
}

input {

  font-size: var(--font-size-base);
  max-width: 300px;
  @media(min-width: 992px) {
    max-width: unset;
  }

  &::placeholder {
    font-family: var(--font-family-base);
    color: var(--grey-dark);
  }
  &:focus, &:active, &:target, &:active {
    outline: none;
    box-shadow: none;
    border-color: var(--primary) !important;
  }

  &[type="text"], &[type="password"], &[type="email"], &[type="tel"], &[type="number"], &[type="date"] {
    height: var(--line-height);
    padding: calc(var(--gutter-width) * 0.5) calc(var(--gutter-width) * 0.75);
    border-radius: calc(var(--border-radius-form));
  }

  &[type="submit"], &[type="file"]::file-selector-button {
    padding: calc(var(--gutter-width) * 0.75) calc(var(--gutter-width));
    margin-right: var(--gutter-width);

    border-color: var(--primary);
    border-width: var(--button-border-width);
    border-style: solid;
    border-radius: var(--border-radius-form);

    background: var(--primary);
    color: var(--white);

    font-weight: bold;
    text-decoration: none;

    cursor: pointer;
    transition: all 0.5s;

    &:hover {
      background: var(--white);
      color: var(--primary);
    }
  }
}

.form-item:not(.form-type-checkbox):not(.form-type-radio):not(.checkboxes--wrapper) {
  display: grid;
  grid-template-rows: auto auto;
  grid-gap: calc(var(--gutter-width));

  margin-bottom: calc(var(--line-height));

  .form-item__label {
    font-weight: bold;
    align-self: center;
  }

  @media(min-width: 992px) {
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: auto;
    grid-gap: calc(var(--gutter-width));

    margin-bottom: calc(var(--line-height));

    .form-item__label {
      font-weight: bold;
      align-self: center;
    }
  }
}

.form-item--radio, .form-item--checkbox, .form-type-checkbox, .form-type-radio, .checkboxes--wrapper {
  display: grid;
  grid-template-rows: auto auto;
  grid-gap: calc(var(--gutter-width));
  margin-bottom: calc(var(--line-height));

  @media(min-width: 992px) {
    grid-template-columns: 200px auto;
    grid-template-rows: auto;

    .fieldset__wrapper--group {
      grid-column: 2;
    }
  }

  input[type="checkbox"], input[type="radio"] {
    position: relative;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    float: left;
    margin: 0;
    padding: 0;
    height: 1px;
    width: 1px;

    background: transparent;
    border: none;
    border-radius: 0;

    font-size: calc(var(--font-size-base));

    &:focus, &:active, &:focus-visible {
      border: none;
      outline: none;
      background-image: none;
      box-shadow: none;
    }
  }

  input[type="checkbox"] + label, input[type="radio"] + label {
    display: flex;
    align-items: center;

    cursor: pointer;
    padding-left: calc(var(--gutter-width) * 0);
    color: var(--black);

    margin-bottom: calc(var(--line-height));

    &::before {
      position: relative;

      display: inline-block;
      top: 0;
      margin-right: calc(var(--gutter-width));
      margin-left: 0;

      content: "\e182";
      font-family: var(--font-family-icons);

      color: transparent;
      text-align: center;
      line-height: 1;
      font-size: calc(var(--font-size-lead));

      background: var(--white);
      border: var(--button-border-width) solid var(--primary);
    }
  }
  input[type="checkbox"]:checked + label::before, input[type="radio"]:checked + label::before {
    color: var(--black);
  }
  input[type="checkbox"] + label:hover::before, input[type="radio"] + label:hover::before {
    color: var(--primary);
  }
}

.form-item--range {
  input[type="range"],
  input[type="range"]::-webkit-slider-thumb,
  input[type="range"]::-moz-range-thumb,
  input[type="range"]::-webkit-slider-runnable-track,
  input[type="range"]::-moz-range-track {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
  }
  input[type="range"]:focus. input[type="range"]:active, input[type="range"]:target {
    outline: none;
  }

  input[type="range"] {
    &::-webkit-slider-runnable-track {
      width: 100%;

      background: var(--grey-light);
      box-shadow: var(--button-border-width) var(--button-border-width) var(--button-border-width) var(--grey-dark);
      border-radius: var(--border-radius-form);
    }
    &::-webkit-slider-thumb , &::-moz-range-thumb {
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      appearance: none !important;

      border: 1px solid var(--primary);
      border-radius: var(--border-radius-form);

      width: calc(var(--gutter-width));
      height: calc(var(--gutter-width));

      background: var(--primary);
      box-shadow: var(--button-border-width) var(--button-border-width) var(--button-border-width) var(--primary-dark);
    }
  }
}

.form-select {
  max-width: 352px;
  @media(min-width: 992px) {
    max-width: unset;
  }

  font-size: var(--font-size-base);
  padding: calc(var(--gutter-width) * 0.5) calc(var(--gutter-width) * 0.75);
  height: calc(var(--line-height) + calc(var(--gutter-width) * 0.5 * 2.445));

  font-family: var(--font-family-base);
  color: var(--grey-dark);
  &:has(option:checked:not([value=""])) {
    color: var(--black);
  }

  border-radius: calc(var(--border-radius-form));
  border-width: 2px;

  &:focus, &:active, &:target, &:active {
    outline: none;
    box-shadow: none;
    border-color: var(--primary) !important;
  }
}