/* Forms: groups, labels, inputs, checkbox/radio, select, validation. */
:root {
  --input-padding: var(--space-8);
  --input-padding-large: var(--space-12);
  --input-bg-color: light-dark(var(--true-white), var(--black));
  --input-border-radius: var(--radius-base);
  --input-color: light-dark(var(--black), var(--true-white));
  --input-font-size: var(--font-size-base);
  --input-font-weight: var(--font-weight-normal);
  --input-box-shadow: light-dark(var(--black), var(--gray-900));

  --checkbox-color-base: var(--blurple);
  --radio-color-base: var(--blurple);
}

.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-label {
  display: inline-block;
  margin-bottom: 4px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: .5px;
}

.form-control {
  padding: var(--input-padding);
  background-color: var(--input-bg-color);
  border: var(--border-base);
  border-radius: var(--input-border-radius);
  color: var(--input-color);
  font-size: var(--input-font-size);
  font-weight: var(--input-font-weight);
  font-family: var(--font-family-sans-serif);
  display: block;
  width: 100%;
  appearance: none;
  outline: none;

  &:hover {
    outline: 1px solid light-dark(var(--black), var(--oc-gray-4));
  }

  &:focus-within,
  &:active {
    outline: 2px solid var(--black);
    outline-offset: 0px;
  }

  &::placeholder {
    color: var(--oc-gray-4);
    font-weight: var(--font-weight-normal);
  }
}

.form-control--large {
  padding: var(--input-padding-large);
}

/* checkbox and radio. The native control is moved off-screen and the
   label's ::before/::after draw the indicator. These apply site-wide. */
:is([type="checkbox"], [type="radio"]) {
  &:checked,
  &:not(:checked) {
    position: absolute;
    left: -9999px;
  }

  &:checked + label,
  &:not(:checked) + label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--font-size-med);
    line-height: 1rem;
    position: relative;

    &::before {
      border: var(--border-base);
      background: var(--white);
      border-color: var(--gray-400);
      border-width: 2px;
      content: '';
      position: relative;
      width: 20px;
      height: 20px;
      transition: var(--transition-default);
      flex-shrink: 0;
      flex-grow: 0;
    }

    &::after {
      position: absolute;
      transition: var(--transition-default);
    }
  }

  &:not(:checked) + label:hover::before {
    border-color: var(--gray-500);
  }

  &:not(:checked) + label::after {
    opacity: 0;
    transform: scale(0);
  }

  &:checked + label::after {
    opacity: 1;
    transform: scale(1);
  }

  + label > span {
    padding-left: 8px;
  }
}

[type="checkbox"] {
  &:checked + label,
  &:not(:checked) + label {
    &::before {
      border-radius: var(--radius-base);
    }

    &::after {
      font-family: var(--font-family-icon);
      font-size: var(--font-size-base);
      content: '\eb7b';
      color: var(--checkbox-color-base);
      top: 2px;
      left: 2px;
    }
  }

  &:checked + label::before {
    border-color: var(--checkbox-color-base);
  }
}

[type="radio"] {
  &:checked + label,
  &:not(:checked) + label {
    &::before {
      border-radius: 100%;
    }

    &::after {
      top: 4px;
      left: 4px;
      content: '';
      width: 12px;
      height: 12px;
      background: var(--radio-color-base);
      border-radius: 100%;
    }
  }

  &:checked + label::before {
    border-color: var(--radio-color-base);
  }
}

/* select chevron */
.form-group:has(select)::after {
  position: absolute;
  right: 12px;
  top: 50%;
  font-family: var(--font-family-icon);
  content: "\EA4E";
}

/* jQuery Validate adds these classes at runtime (footer.php) */
label.error {
  display: block;
  background-color: var(--red-lightest);
  color: var(--red);
  font-size: 11px;
  padding: 2px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.form-control.error {
  border: 1px solid var(--red);
  outline-color: var(--red);
}

.form-control.success {
  border-color: var(--green);
  outline-color: var(--green);
}