// form elements
.form-control {
  padding: 0.4rem;
  line-height: normal;
}
.form-control:invalid {
  background: #ffaaaa80;
}
[data-bs-theme='dark'] {
  .form-control:invalid {
    background: #ff666680;
  }
}
.form-group .control-label {
  font-weight: bold;
  margin-top: auto;
  margin-bottom: auto;
}
@include media-breakpoint-up(md) {
  .form-group .control-label {
    text-align: right;
  }
}
.form-inline {
  // don't use flexbox here, this would break too much of our forms
  display: block;
}

// enhance style buttons on hover and focus
@mixin btn($class, $bg) {
  .btn-#{$class} {
    background-size: 200% 200%;
    background-position: 50%;
    &:focus {
      background-color: $bg;
    }
    &:hover, &:active:hover {
      background-color: darken($bg, 6%);
    }
    &:active {
      background-color: darken($bg, 12%);
      @include gradient-radial(darken($bg, 12%) 10%, $bg 11%);
      background-size: 1000% 1000%;
      @include box-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
    }
  }
}
.btn {
  border: none;
  @include box-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
  @include transition(all 0.4s);
  &-link {
    border-radius: $btn-border-radius-base;
    @include box-shadow(none);
    color: $btn-default-color;
    &:hover, &:focus {
      @include box-shadow(none);
      color: $btn-default-color;
      text-decoration: none;
    }
  }
  &-default.disabled {
    background-color: rgba(0, 0, 0, 10 / 100);
    color: rgba(0, 0, 0, 40 / 100);
    opacity: 1;
  }
}
.btn-group {
  .btn + .btn, .btn + .btn-group, .btn-group + .btn, .btn-group + .btn-group {
    margin-left: 0;
  }
  &-vertical {
    > .btn + .btn, > .btn + .btn-group, > .btn-group + .btn, > .btn-group + .btn-group {
      margin-top: 0;
    }
  }
}
.darkmode {
  .btn.btn-light {
    background-color: #070605;
    border-color: #070605;
  }
}

// wells (used for comments)
.well-lg {
  padding: 24px;
  border-radius: 3px;
}
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #fdfdfd;
  border: 1px solid #e3e3e3;
  border-radius: 1px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 5 / 100);
}
[data-bs-theme='dark'] .well {
  background-color: $default-bg-color-dark;
  border-color: #1c1c1c;
}

// round images (used for comments) and badges inside summary
.img-circle {
  border-radius: 50%;
}
.editor-yaml-guide {
  text-align: left !important;
}
.darkmode {
  .custom-select {
    color: $default-font-color-dark;
    background-color: $default-bg-color-dark;
  }
}

// formatting for validation warnings
.is-invalid-non-critical {
  border-color: var(--bs-warning) !important;
  background-image: none !important;
  padding-right: 0.5rem !important;
}
