@use "sass:color";

// Form

label {
  margin-bottom: 0;
}

.form-control {
  &::placeholder {
    font-size: .8rem;
    font-style: italic;
  }
}

td .form-control {
  display: inline-block;
  width: auto;
}

legend {
  margin-bottom: 1.1rem;
  font-size: 1rem;
  font-weight: $font-weight-normal;
}

.checkboxes {
  padding-top: 5px;

  .checkbox input {
    position: static;
    margin-left: 0;
  }
}

.form-check {
  padding-top: 5px;
  margin-bottom: 0;
}

.modal label {
  width: 100%;
}

// Validation
.invalid {
  border-color: var(--danger);
}

.valid {
  border-color: var(--success);
}

.form-control-feedback {
  display: block;
}

[aria-grabbed="true"] {
  box-shadow: $form-aria-grabbed-box-shadow;
}

select.form-control {
  background-color: $form-select-bg;
}

.field-media-wrapper {
  display: block;
  width: 100%;
  max-width: calc(50vw - 5rem);

  .field-media-preview {
    width: 100%;
    max-width: none;
  }

  .button-select {
    background-color: color.adjust($success, $lightness: -8%);
  }

  .button-clear {
    background-color: color.adjust($danger, $lightness: -8%);
  }

  .button-clear > .#{$fa-css-prefix}-check,
  .button-select > .#{$fa-css-prefix}-times {
    color: $gray-100;
  }

  @include media-breakpoint-down(lg) {
    min-width: 100%;
  }
}

// Bootstrap 4 b/c
.form-inline .form-select, .form-inline .custom-select, .form-inline .form-control {
  display: inline-block;
  width: auto;
}

@include media-breakpoint-down(md) {
  .form-inline .form-select, .form-inline .custom-select, .form-inline .form-control {
    width: 100%;
  }
}