// Dropped in BS5, but this seems pretty fundamental?
$form-group-margin-bottom: 1rem !default;
.form-group {
  margin-bottom: $form-group-margin-bottom;
}

// The @extends here add a lot of bloat to version=4 (& it's not entirely correct)
// Instead of fixing, consider this deprecated, and for BS5, we'll modify
// their selectors directly to accomodate shiny
@if $bootstrap-version == 4 {
  .shiny-input-checkboxgroup, .shiny-input-radiogroup {
    // TODO: this is pretty expensive!
    .checkbox, .radio {
      @extend .form-check;
      label {
        @extend .form-check-label;
      }
      label > input {
        @extend .form-check-input;
      }
    }

  // Since these inline classes don't have a proper div container
  // (they're labels), we borrow just the styling we need from
  // .form-check-inline
  // https://github.com/rstudio/bs4/blob/7aadd19/inst/node_modules/bootstrap/scss/_forms.scss#L227-L240
    .checkbox-inline, .radio-inline {
      padding-left: 0;
      margin-right: $form-check-inline-margin-x;

      label > input {
        margin-top: 0;
        margin-right: $form-check-inline-input-margin-x;
        margin-bottom: 0;
      }
    }
  }
}

.input-daterange .input-group-addon.input-group-prepend.input-group-append {
  padding: inherit;
  line-height: inherit;
  text-shadow: inherit;
  border-width: 0;
  .input-group-text {
    border-radius: 0;
  }
}

.shiny-input-checkboxgroup .checkbox-inline,
.shiny-input-radiogroup .radio-inline {
  cursor: pointer;
}

// Fix the position of checkbox and radio group labels to match other inputs
// labels, see https://github.com/rstudio/shiny/blob/6fc06281/inst/www/shared/shiny_scss/shiny.scss#L344-L356
// TODO: Consider removing if we add `input_checkbox()` and `input_radio()`
@if $bootstrap-version == 5 {
  .shiny-input-checkboxgroup,
  .shiny-input-radiogroup {
    label ~ .shiny-options-group {
      margin-top: calc(#{-($line-height-base - $form-check-input-width) * .5} - #{$input-btn-border-width});
    }
  }

  // Shiny's selectInput(selectize=FALSE) renders <select class="form-control">.
  // BS5 strips the native chevron from .form-control (via `appearance: none`)
  // and provides a replacement chevron only on its new .form-select class,
  // which Shiny doesn't use. Re-apply .form-select's chevron treatment to
  // select.form-control here.
  // Source: https://github.com/twbs/bootstrap/blob/v5.3.8/scss/forms/_form-select.scss
  select.form-control {
    --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
    padding-right: $form-select-indicator-padding;
    background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: $form-select-bg-position;
    background-size: $form-select-bg-size;

    &[multiple],
    &[size]:not([size="1"]) {
      padding-right: $form-select-padding-x;
      background-image: none;
    }
  }

  @if $enable-dark-mode {
    @include color-mode(dark) {
      select.form-control {
        --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
      }
    }
  }
}