// Override normalize.ss
html {
  font-size: $font-size-root;
}

button,
html [type="button"] {
  -webkit-appearance: none;
}

// Fix list-group overriding .collapse style
* .collapse {
  display: none;
}

// Keep the "show" class for Reactstrap Collapse support, styles removed from Bootstrap 4.0 -> 4.1
// https://github.com/reactstrap/reactstrap/blob/5.0.0/src/Collapse.js#L32
// https://github.com/twbs/bootstrap/blob/v4.0.0/scss/_transitions.scss#L12-L17
// https://github.com/twbs/bootstrap/blob/v4.1.2/scss/_transitions.scss#L11-L15
.collapse.show {
  display: block;
}

// Fix margin for btn in btn-toolbar without btn-group
.btn-toolbar > .btn:not(:first-child) {
  margin-left: 5px;
}

.btn-toolbar > .btn-group + .btn {
  margin-left: 0;
}

.btn-toolbar > .btn-group .btn-group {
  margin-right: 0;
}

// Fix btn-link to have transparent bg (i.e. it should look like a regular link)
.btn-link:hover {
  background-color: transparent;
}

// Don't tie input padding to btn padding
.form-control {
  padding-top: $input-padding-y;
  padding-bottom: $input-padding-y;

  &::placeholder {
    font-style: italic;
  }
}

// Restore bottom padding
.form-check {
  margin-bottom: $form-check-margin-bottom;
}

// Remove box shadow from the tables which is preventing the backgrounds from displaying
.table > :not(caption) > * > * {
  box-shadow: none;
}

// Render readonly form controls the same as disabled (bootstrap stopped doing this in 5.2)
.form-control[readonly] {
  color: $input-disabled-color;
  background-color: $input-disabled-bg;
  border-color: $input-disabled-border-color;
  // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
  opacity: 1;
}

// Restore bootstrap 4 height for some form elements
.form-control, .field input.text, .field textarea, .field select {
  height: $input-height;
}

textarea.form-control, .field textarea {
  height: auto;
}

// Override bootstrap's `outline: 0;` rules
.btn:focus-visible,
.btn-close:focus-visible,
.form-check-input:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible {
  outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
}

.field {
    input.text:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
      outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
  }
}

.form-check-input:focus-visible {
  box-shadow: none;
}