/* Custom form elements for radios, checkboxes, and selects - following BS4 semantics */

/* Custom control stacks (doesn't contain .control-inline means default (Stack) */
.custom-control:not(.custom-control-inline) {
  /* This is the default (normal size) bottom margin between divs*/
  margin-bottom: $luci-space-xs;
  /* This means a stack of large custom radios or checkboxes */
  &.custom-radio-lg,
  &.custom-checkbox-lg {
    margin-bottom: $luci-space-md;
  }
  /* last one in the stack gets no bottom margin */
  &:last-child {
    margin: 0;
  }
}

$indeterminate-icon-size: 10px;
$indeterminate-icon-size-sm: 8px;

.custom-checkbox {
  font-size: $luci-font-size-sm;
  line-height: $luci-font-line-height-body;
  min-height: 0;

  small.form-text.text-muted {
    font-size: $luci-font-size-sm;
  }

  > .custom-control-label {
    &::before {
      top: 1px;
      left: -24px;
      border: 1px solid $gray-400;
      height: 18px;
      width: 18px;
    }

    &::after {
      background-size: 15px;
      top: 1px;
      left: -24px;
    }
  }

  /* The box itself */
  .custom-control-input {
    &:checked ~ .custom-control-label::before {
      border: 1px solid $lucix-interactive-color-default;
    }

    &:indeterminate ~ .custom-control-label {
      position: relative;

      &::before {
        background-color: $luci-background-color-white;
        border: 1px solid $gray-400;
      }

      &::after {
        background: $luci-interactive-color-default;
        width: $indeterminate-icon-size-sm;
        height: $indeterminate-icon-size-sm;
        background-image: none !important;
        left: -19px;
        top: 6px;
        margin: 0;
        padding: 0;
        border-radius: 2px;
      }
    }
  }

  /* large has some tweaks */
  &.custom-checkbox-lg {
    .custom-control-input {
      &:indeterminate ~ .custom-control-label {
        &::after {
          width: $indeterminate-icon-size;
          height: $indeterminate-icon-size;
          left: -18px;
          top: 7px;
        }
      }
    }
  }
}
/* Small additional label */
.custom-checkbox-sm {
  small.form-text.text-muted {
    font-size: $luci-font-size-xs;
    margin: $luci-space-stack-xs;
  }
}

$lg-dims: 22px;

/* Custom Radio */
.custom-radio {
  font-size: $luci-font-size-sm;
  line-height: $luci-font-line-height-body;
  min-height: 0;

  small.form-text.text-muted {
    font-size: $luci-font-size-sm;
  }

  > .custom-control-label {
    &::before {
      top: 0;
      left: -24px;
      border: 1px solid $gray-400;
      height: 18px;
      width: 18px;
    }

    &::after {
      background-size: 14px;
      top: 1px;
      left: -23px;
    }
  }

  .custom-control-input {
    &:checked ~ .custom-control-label::before {
      border: 2px solid $lucix-interactive-color-default;
      background-color: $white;
    }
  }
}

.custom-radio-sm {
  small.form-text.text-muted {
    font-size: $luci-font-size-xs;
    margin: $luci-space-stack-xs;
  }
}

/* Consistent parts for large checkboxes and radios */
.custom-checkbox-lg,
.custom-radio-lg {
  font-size: $luci-font-size-md;

  > .custom-control-label {
    padding-left: $luci-space-sm;

    &::before {
      border-width: 2px !important;
      width: $lg-dims;
      height: $lg-dims;
      top: 1px;
    }

    &::after {
      background-size: 45% !important;
      left: -1.95rem;
      width: $lg-dims;
      height: $lg-dims;
      padding-left: $lg-dims + $luci-space-sm;
      margin-right: 30px;
      top: 1px;
    }
  }
}

/* little extra tweak for large custom radios */
.custom-radio-lg {
  > .custom-control-label {
    &::after {
      background-size: 17px !important;
      left: -30px;
      top: 1px;
    }
  }
}

/* Invalid */
.custom-control-input {
  &.ng-invalid:not(.ng-untouched) ~ .custom-control-label {
    &::before {
      box-shadow: $form-box-shadow-error;
    }
  }
}

/* Custom select */

.custom-select {
  &:disabled {
    background: $custom-select-indicator-disabled no-repeat right
      $custom-select-padding-x center / $custom-select-bg-size;
  }
}

/* Custom control icon and button containers */

.custom-control-icon-container {
  position: relative;

  .form-control {
    padding-right: 40px;

    &.form-control-sm {
      padding-right: 28px;
    }
  }
}

.custom-control-button {
  position: absolute;
  top: 1px;
  right: 1px;

  &.btn-icon-only.custom-control-button:hover:not(:disabled) {
    border-color: $luci-icon-color-hover;
    background-color: $luci-icon-color-hover;
  }

  &.custom-control-button-sm {
    min-height: 28px;
    max-width: 28px;

    > nwf-icon {
      svg {
        height: $luci-icon-size-xs;
        width: $luci-icon-size-xs;
      }
    }
  }
}