/* sb-field */
$sb-field-margin-bottom: calculateRem(8px);
$sb-field-disabled-background: $gray-0;
$sb-field-disabled-border: $input-border-width solid $gray-0;
$sb-field-disabled-opacity: 0.45;

/* sb-input */
$sb-input-background-color: $white-color;
$sb-input-font-size: calculateRem(13px);
$sb-input-line-height: calculateRem(21px);
$sb-input-padding: calculateRem(9px);
$sb-input-color: var(--gray-800);
$sb-input-border-radius: calculateRem(3px);
$sb-input-border-normal: $input-border-width solid $gray-200;
$sb-input-border-focus: $input-border-width solid $primary-600;
$sb-input-border-hover: $input-border-width solid $primary-300;
$sb-input-border-error: $input-border-width solid $red-400;
$sb-input-border-success: $input-border-width solid $secondary-200;

/* sb-input label and text */
$sb-error-text: $red-400;
$sb-success-text: $secondary-200;
$sb-label-font-size: calculateRem(13px);
// Dropdown
$sb-dropdown-border-color: $gray-200;
$sb-dropdown-border-focus: $primary-600;
$sb-dropdown-border-hover: $primary-300;
$sb-dropdown-min-height: calculateRem(39px);
$sb-dropdown-border-radius: calculateRem(3px);
$sb-dropdown-border: $input-border-width solid $sb-dropdown-border-color;
$sb-dropdown-active-item: $gray-800;
$sb-multi-select-dropdown-icon-font-size: calculateRem(20px);
$sb-dropdown-label-font-size: calculateRem(12px);
$sb-selection-dropdown-min-height: calculateRem(32px);
$sb-selection-dropdown-padding: calculateRem(4px) calculateRem(8px);
$sb-multiple-dropdown-label-font-size: $font-size-sm;
$sb-multiple-dropdown-label-margin-right: calculateRem(4px);
$sb-multiple-dropdown-text-margin: calculateRem(3px) 0 calculateRem(3px)
  calculateRem(10px);
$sb-multiple-dropdown-text-font-size: $font-size-sm;
$sb-selection-line-height: calculateRem(18px);

/* form element styles */

#{$all-text-inputs} {
  //border: 1px solid #ccc;
}
#{$all-text-inputs-active} {
  // border: 1px solid #aaa;
}
#{$all-text-inputs-focus} {
  // border: 1px solid #1565c0;
}
#{$all-text-inputs-hover} {
  // border: 1px solid #aaa;
}
#{$all-text-inputs-invalid} {
  // border: 1px solid #00f;
}

/* form element styles */

.sb-form {
  position: relative;
  max-width: 100%;
}
.sb-field {
  position: relative;
  margin-bottom: $sb-field-margin-bottom;
  .sb-input-icon {
    position: absolute;
    top: $base-block-space;
    right: 0;
    display: block;
    width: $base-block-space * 4;
    height: $base-block-space * 4;
    text-align: center;
    pointer-events: none;
  }
  &.disabled,
  [disabled] {
    background-color: $sb-field-disabled-background;
    border: $sb-field-disabled-border;
    opacity: $sb-field-disabled-opacity;
    pointer-events: none;
  }
  .ui.selection.dropdown {
    border-radius: calculateRem(2px);
    //line-height: 18px;
    font-size: calculateRem(12px);
    width: 100%;
    min-height: $sb-selection-dropdown-min-height;
    padding: ($base-block-space / 2) ($base-block-space * 1);
    border-color: var(--gray-200);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .text {
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 1.5;
      margin: 0rem calculateRem(20px) 0rem 0rem;
    }
    .menu > .item {
      padding: calculateRem(7px) calculateRem(5px);
      padding: calculateRem(12px) calculateRem(10px) !important;
      line-height: 1.4;
      font-size: calculateRem(12px);
      height: auto;
    }
  }
  .ui.multiple.dropdown {
    .label {
      margin-bottom: calculateRem(4px);
      margin-top: calculateRem(4px);
      font-size: calculateRem(12px);
    }
  }
}
.sb-form-control {
  background-color: $sb-input-background-color;
  background-clip: padding-box;
  border: calculateRem(1px) solid #999;
  border-radius: $sb-input-border-radius;
  color: $sb-input-color;
  display: block;
  font-size: $sb-input-font-size;
  line-height: $sb-input-line-height;
  max-width: 100%;
  padding: calculateRem(4px) calculateRem(8px);
  position: relative;
  width: 100%;
  min-height: ($base-block-space * 4);
  &.sb-fluid {
    width: 100%;
  }
  &:focus {
    border: $sb-input-border-focus;
    outline: 0;
  }
  &:hover {
    border: $sb-input-border-hover;
  }
  &.is-invalid,
  &.is-invalid:hover,
  &.is-invalid:focus {
    border: $sb-input-border-error;
  }
  &.is-valid,
  &.is-valid:hover,
  &.is-valid:focus {
    border: $sb-input-border-success;
  }
}

.characters-left {
  position: absolute;
  bottom: calculateRem(8px);
  right: calculateRem(8px);
  color: var(--gray-200);
  font-size: $font-size-sm;
  background: var(--white);
  border-radius: calculateRem(8px);
  html[dir="rtl"] & {
    right: auto;
    left: calculateRem(8px);
  }
}

// .sb-textarea {
//   border-radius: .2143rem;
//   height: 12rem;
//   min-height: 8rem;
//   max-height: 24rem;
//   padding: 0.5714rem;
//   width: 100%;
//   line-height: 1.5;
//   font-size: 0.8571rem;
//   &:focus {
//     border: 0.5px solid $primary-600;
//   }
//   &:hover {
//     border: 0.5px solid $primary-300;
//   }
// }

textarea {
  overflow: auto;
  resize: vertical;
}

.sb-form-row {
  display: flex;
  flex-wrap: wrap;
}

input[required],
input.required {
  &:before {
    color: var(--red);
    content: "*";
    position: absolute;
    margin-left: calculateRem(-15px);
  }
}

label {
  display: inline-block;
  margin-bottom: $base-block-space * 1;
  font-size: $sb-label-font-size;
  font-weight: bold;
}

.sb-footer-license {
  display: flex;
  margin-bottom: $base-block-space * 1;
  font-size: $sb-label-font-size;
  font-weight: normal;
  align-items: flex-start;
  justify-content: center;
}

small {
  font-size: 80%;
  font-weight: 400;
}

.sb-error-text {
  margin-top: $base-block-space * 1;
  color: $sb-error-text;
}

.sb-success-text {
  margin-top: $base-block-space * 1;
  color: $sb-success-text;
}

input:-internal-autofill-previewed,
input:-internal-autofill-selected,
textarea:-internal-autofill-previewed,
textarea:-internal-autofill-selected,
select:-internal-autofill-previewed,
select:-internal-autofill-selected {
  background-color: $white !important;
}

.batchAddUserForm,
.batchUpdateForm {
  .sb-field-group {
    .required::after {
      margin: -0.2em 0 0 0.2em;
      content: "*";
      color: #db2828;
    }
  }
  .sb-field.ui.left.icon.input {
    width: 100%;
    .icon {
      z-index: 9;
    }
  }
  .d-flex.flex-w-wrap {
    .sb-field-group {
      flex: 1;
    }
  }
}

.sb-form .sb-field-group.error input,
.sb-form .sb-field-group.error label {
  color: #9f3a38;
}
.sb-form .sb-field-group.error .ui {
  margin-bottom: calculateRem(4px) !important;
}
.sb-form .sb-field-group.error input {
  background: #fff6f6;
  border-color: #e0b4b4;
  color: #9f3a38;
  border-radius: "";
  box-shadow: none;
}

.ui.search.selection.dropdown > input.search {
  padding: calculateRem(8px) calculateRem(8px);
}
.ui.multiple.search.dropdown > input.search {
  padding: 0px calculateRem(8px);
  margin: 0px;
}
.sb-field .ui.multiple.search.dropdown .text {
  line-height: normal;
}