$input-size: 44px;

.form-control {
  height: auto;
  padding: spacer(1);
}

input[type="checkbox"] {
  $checkbox-size: $input-size;

  appearance: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  width: $checkbox-size !important;
  // the !important is necessary here because sf.gov's CSS sets
  // `height: auto` with a higher specificity
  height: $checkbox-size !important;

  // FIXME: 2px is a magic number here
  border: 2px solid $slate !important;
  border-radius: radius(1) !important;

  // This overrides sf-design-system's CSS that hides the input
  // and renders the checkbox with `::before { content }`
  opacity: 1 !important;
  background-position: center center;
  background-repeat: no-repeat;

  &:checked {
    border-width: border-width(1) !important;
    background-image: svg-load("../icons/Check.svg", fill=$slate);
  }

  &:focus {
    border-color: $bright-blue !important;
  }

  &:checked:focus {
    background-color: $bright-blue !important;
    background-image: svg-load("../icons/Check.svg", fill=$white);
  }
}

input[type="radio"] {
  $radio-size: $input-size;
  $dot-inset: 8px;

  appearance: none;
  border-radius: 50%;
  border: 2px solid $slate;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  display: inline-block;
  position: relative;
  width: $radio-size;
  height: $radio-size;

  &:focus {
    border-color: $bright-blue;
  }

  &:checked {
    &::after {
      $dot-size: calc(100% - #{$dot-inset * 2});

      content: "";
      position: absolute;
      top: $dot-inset;
      left: $dot-inset;
      width: $dot-size;
      height: $dot-size;
      background: $bright-blue;
      border-radius: 50%;
    }
  }
}

.input-group {
  display: flex;

  .input-group-prepend,
  .input-group-append {
    background: $grey-3;
    flex-shrink: 0;
    padding: 0 spacer(1);
    display: flex;
    align-items: center;
    border: 2px solid $slate;
  }

  .input-group-append {
    border-top-right-radius: radius(1);
    border-bottom-right-radius: radius(1);
    border-left-width: 0;
  }

  .input-group-prepend {
    border-top-left-radius: radius(1);
    border-bottom-left-radius: radius(1);
    border-right-width: 0;
  }

  .form-input {
    flex: auto;

    &:first-child input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child input {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}