// Form

.form-control {
  max-width: $input-max-width;
  background: $form-control-bg;
  border: $form-control-border;

  &:disabled,
  &[readonly] {
    background-color: $form-control-bg-disabled;
    opacity: 1;
    &:hover,
    &:active,
    &:focus {
      cursor: not-allowed;
    }
  }

  &:focus:not(:disabled):not([readonly]) {
    border: 1px solid var(--template-link-color) !important;
  }

  &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button,
  &:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: $file-selector-btn-bg-hvr;
  }

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

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

  &::placeholder {
    font-style: italic;
    opacity: .9;
  }

  &::-webkit-file-upload-button,
  &::file-selector-button {
    background-color: $file-selector-btn-bg;
  }
}

.control-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 1rem;

  > .form-check {
    display: inline-block;
  }

  &::after {
    display: table;
    clear: both;
    content: "";
  }

  .control-label {
    width: 240px;
    padding: .3rem 1rem .3rem 0;
  }

  .controls {
    position: relative;
    flex: 1;
    min-width: 210px;
    max-width: 100%;

    + div {
      width: 100%;
      margin: 5px 0 10px;
    }
  }

  .form-vertical & {
    flex-direction: column;
  }
}

.stack .control-label {
  width: 100%;
}

.spacer {
  hr {
    width: 380px;
  }
}

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

.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);
}

label.invalid {
  color: var(--danger-text);
}

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

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

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

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

.sortable-handler.inactive {
  opacity: .3;
}

// set up hidden tooltip
[role="tooltip"]:not(.show) {
  z-index: $zindex-tooltip;
  display: none;
  padding: .5em;
  margin: .25em;
  color: $white;
  text-align: start;
  background: $black;
  border-radius: .2rem !important;
}

// reveal associated tooltip on focus
:focus + [role="tooltip"],
:hover + [role="tooltip"] {
  position: absolute;
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  white-space: normal;
}

.filter-search-bar__description {
  top: 100%;
  bottom: auto;
}

.container-popup .filter-search-bar__description {
  top: 100%;
  bottom: auto;
}

.input-group > .form-control[readonly] {
  margin-right: 1px;
}

.form-group {
  @extend .mb-3;
}

// Subform - non table layout
div.subform-repeatable-group {
  position: relative;
  padding: 32px 32px 16px 28px;
  margin-top: 20px;
  border: $input-border-width solid $input-border-color;
  @include border-radius($border-radius);

  > .btn-toolbar {

    .btn-group {
      position: static;
    }

    .btn {
      position: absolute;

      &.group-add {
        right: -1px;
        bottom: -1px;
        border-radius: $border-radius 0 $border-radius 0;
      }
      &.group-remove {
        top: -1px;
        right: -1px;
        border-radius: 0 $border-radius;
      }
      &.group-move {
        top: 50%;
        right: 100%;
        padding: 0;
        border-radius: $border-radius 0 0 $border-radius;
        transform: translateY(-50%);

        span {
          padding: 1.5rem .5rem;
        }
      }
      &.group-move-up {
        top: 50%;
        right: 100%;
        margin-top: -45px;
        border-radius: 0;
        transform: translateY(-50%);
      }
      &.group-move-down {
        top: 50%;
        right: 100%;
        margin-top: 45px;
        border-radius: 0;
        transform: translateY(-50%);
      }
    }
  }
}

// Highlight draggable section
.subform-repeatable-group[draggable="true"] {
  // For non table layout
  background-color: $teal;

  // For table layout
  > td {
    background-color: $teal;
  }
}