Overleaf/services/web/frontend/stylesheets/components/form.scss

.form-check-input {
  @function form-check-box-svg($color) {
    @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
  }

  @function form-check-radio-svg($color) {
    @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$color}'/></svg>");
  }

  @function form-check-indeterminate-svg($color) {
    @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
  }

  &:hover {
    &:not(:disabled) {
      border-color: var(--border-hover);

      &:checked,
      &[type='checkbox']:indeterminate {
        background-color: var(--bg-accent-02);
        border-color: var(--bg-accent-02);
      }
    }
  }

  &:disabled {
    @include input-disabled-styles;

    &[type='checkbox']:indeterminate {
      @include input-disabled-styles;

      background-image: escape-svg(form-check-indeterminate-svg($neutral-40));
    }
  }

  // Use disabled attribute in addition of :disabled pseudo-class
  // See: https://github.com/twbs/bootstrap/issues/28247
  &[disabled],
  &:disabled {
    ~ .form-check-label {
      color: $input-disabled-color;
    }

    &:checked {
      &[type='checkbox'] {
        background-image: escape-svg(form-check-box-svg($neutral-40));
      }

      &[type='radio'] {
        background-image: escape-svg(form-check-radio-svg($neutral-40));
      }
    }
  }

  &:focus-visible {
    outline: 0;
    border-color: $input-focus-border-color;
    box-shadow: $input-focus-box-shadow;
  }
}

.form-control {
  &[disabled],
  &:disabled {
    &::placeholder {
      color: var(--content-disabled);
    }
  }
}

// Fake disabled checkbox style
.readonly-disabled-checkbox input.form-check-input {
  @include input-disabled-styles;

  &:hover:not(:disabled):checked {
    @include input-disabled-styles;
  }
}

.form-switch {
  .form-check-input {
    --bs-form-check-bg: var(--bg-dark-tertiary);

    height: 20px;
    margin: 0;
    border: 0;

    &:hover {
      cursor: pointer;
    }

    &:disabled {
      opacity: 0.32;
      background-color: var(--bg-dark-tertiary);

      &:checked {
        background-color: var(--bg-accent-01);
        background-image: #{escape-svg(
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$component-active-color}'/></svg>")
          )};
      }
    }
  }
}

.form-check-label-description {
  .form-text-inner {
    margin-top: var(--spacing-01) !important;
  }
}

.form-text {
  .form-control[disabled] ~ & {
    color: var(--content-disabled);
  }

  .form-text-inner {
    display: flex;
    gap: var(--spacing-02);
    line-height: var(--line-height-02);
    margin-top: var(--spacing-04);
  }

  &.marginless {
    &,
    .form-text-inner {
      margin: 0;
    }
  }
}

.form-label {
  &:has(+ .form-control[disabled], + .form-control-wrapper-disabled) {
    color: var(--content-disabled);
  }
}

.form-group {
  margin-bottom: $form-group-margin-bottom;
}

.form-control-wrapper {
  position: relative;

  &.form-control-wrapper-disabled {
    .form-control-start-icon,
    .form-control-end-icon {
      & > * {
        color: var(--content-disabled);
      }
    }
  }

  .form-control-start-icon,
  .form-control-end-icon {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;

    &:has(> i),
    &:has(> .material-symbols) {
      pointer-events: none;
    }
  }

  .form-control-start-icon {
    left: 0;
    padding-left: calc(var(--form-control-padding-x) + var(--bs-border-width));
  }

  .form-control-end-icon {
    right: 0;
    padding-right: calc(var(--form-control-padding-x) + var(--bs-border-width));

    .form-control-search-clear-btn {
      @include reset-button;

      display: flex;
      justify-content: center;
    }
  }

  --icon-width: 20px;
  --form-control-padding-x: var(--spacing-04);
  --form-control-icon-offset-y: var(--spacing-04);

  &.form-control-wrapper-sm {
    --form-control-padding-x: var(--spacing-03);
    --form-control-icon-offset-y: var(--spacing-02);
  }

  &.form-control-wrapper-lg {
    --form-control-padding-x: var(--spacing-05);
    --form-control-icon-offset-y: var(--spacing-05);
  }

  .form-control-offset-start {
    padding-left: calc(
      var(--form-control-padding-x) + var(--form-control-icon-offset-y) +
        var(--icon-width)
    );
  }

  .form-control-offset-end {
    padding-right: calc(
      var(--form-control-padding-x) + var(--form-control-icon-offset-y) +
        var(--icon-width)
    );
  }
}

.form-control,
.form-select {
  &:focus,
  &:invalid:focus,
  &.is-invalid:focus,
  &:focus-visible,
  &:invalid:focus-visible,
  &.is-invalid:focus-visible {
    color: $input-focus-color;
    background-color: $input-focus-bg;
    outline: 0;
    border-color: $input-focus-border-color;
    box-shadow: $input-focus-box-shadow;
  }
}

.website-redesign {
  label {
    color: $form-text-color;
    display: inline-block;
    margin-bottom: var(--spacing-02);
    font-weight: bold;

    @include body-sm;
  }

  .checkbox-label {
    margin-left: var(--spacing-04);
  }
}

%input-focus-style {
  border-color: $input-focus-border-color;
  box-shadow: $form-check-input-focus-box-shadow;
}

input[type='range'] {
  display: block;
  width: 100%;
}

// Feedback states
.has-success {
  @include form-control-validation($bg-accent-01);
}

.has-warning {
  @include form-control-validation($bg-warning-03);
}

.has-error {
  @include form-control-validation($bg-danger-01);
}