$input-size: 44px;

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;
    }
  }
}

.formio-component-radio,
.formio-component-selectboxes {
  .field-wrapper {
    margin: 0 -15px 10px;
    padding: 1px 15px 1px;
  }
}

.formio-component-signature {
  border: solid $grey-2 border-width(1);
}

.signature-pad-footer {
  position: relative;
  border-top: dashed 2px $grey-3;
  line-height: 48px;
  background: white;
  color: darken($grey-4, 20%);
  text-align: center;
  font-size: 21px;
}

.signature-refresh {
  font-size: 18px;
  position: absolute;
  left: 20px;
  color: darken($blue-2, 20%);

  &:hover {
    cursor: pointer;
    color: darken($blue-2, 40%);
  }
}