@import "colorScheme.less";

.vdp-datepicker div input,
.formInput,
textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"] {
  border: @border;
  background: #fff !important;
  padding: 0 0.5rem !important;
  width: 100% !important;
  box-sizing: border-box;
  height: 35px !important;
  transition: all 0.1s ease-in;
  position: relative;
  &:after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 50%;
    height: 35px;
    right: 0;
    top: 0;
    background: @grey-dark;
  }
  &:focus {
    border: 1px solid @purple;
    box-shadow: 0px 0px 1px 0px #6d99c5 !important;
  }
}

.vdp-datepicker div input:disabled,
.formInput:disabled,
textarea:disabled,
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="text"]:disabled,
select:disabled {
  color: #666;
  background: #f5f5f5 !important;
  cursor: not-allowed;
}

textarea {
  resize: none;
  padding: 0.5rem !important;
}

.formRow:not(:last-of-type) {
  margin-bottom: 15px;
}

.labelText {
  align-self: center;
}

.selectListWrapper {

  img {
    position: absolute;
    z-index: 15;
    width: 13px;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    height: 10px;
    padding: 11px 11px 11px 6px;
  }

  input {
    height: 35px;
    padding: 0 0.5rem 0 38px;
    box-sizing: border-box;
  }

  ul {
    min-height: 35px !important;
    max-height: 270px !important;
    position: absolute;
    z-index: 155;
    width: 100%;
    background-color: @white;
    top: 34px;
    box-shadow: @boxShadow;
    border: @border;
    li {
      z-index: 1;
      font-size: @smallfont;
      &:hover {
        background: @hover;
      }
      text-align: right;
      list-style: none;
      cursor: pointer;
      border-bottom: @border;
      &:last-child {
        border-bottom: none;
      }
    }
  }
}

//Checkbox & radio

.uiCheckBoxRadioLabel {
  margin: 0;
  display: flex;
  padding-right: 0;
  float: right;
  align-items: center;
  &:hover {
    cursor: pointer;
  }
  .uiChecker {
    border: 1px solid @grey-dark;
    min-width: 15px;
    height: 15px;
    position: relative;
    right: 0;
    background: @white;
    box-shadow: inset 0px 0px 1px 5px @white;
    transition: all 0.2s ease-in;
  }
  .text {
    min-width: max-content;
    margin: -1px 10px 0px 0px;
  }

  .checked {
    background: @grey-dark;
    box-shadow: inset 0px 0px 0px 2px @white;
  }

  input {
    visibility: hidden;
    position: absolute;
    right: -9999999999px;
  }
}

.uiRadioLabel.disabled,
.uiCheckBoxLabel.disabled {
  opacity: 0.8;
  color: @grey-medium;
  &:hover {
    cursor: not-allowed;
  }
  .uiChecker {
    border-color: @grey-medium;
  }
}

.uiCheckBoxLabel {
  margin: 0;
  display: flex;
  padding-right: 0;
  float: right;
  align-items: center;
  &:hover {
    cursor: pointer;
  }
  .uiChecker {
    border: 1px solid @grey-dark;
    min-width: 15px;
    height: 15px;
    position: relative;
    right: 0;
    background: @white;
    box-shadow: inset 0px 0px 1px 5px @white;
    transition: all 0.2s ease-in;
  }
  .text {
    min-width: max-content;
    margin: 0.001rem 10px 0px 0px;
  }

  .checked {
    background: @grey-dark;
    box-shadow: inset 0px 0px 0px 2px @white;
  }

  input {
    visibility: hidden;
    position: absolute;
    right: -9999999999px;
  }
}

.uiRadioLabel {
  margin: 0;
  display: flex;
  padding-right: 0;
  float: right;
  align-items: center;
  &:hover {
    cursor: pointer;
  }
  .uiChecker {
    border: 1px solid @grey-dark;
    min-width: 15px;
    height: 15px;
    position: relative;
    right: 0;
    background: @white;
    box-shadow: inset 0px 0px 1px 5px @white;
    transition: all 0.2s ease-in;
    border-radius: 50% !important;
  }
  .text {
    min-width: max-content;
    margin: 0.001rem 10px 0px 0px;
  }

  .checked {
    background: @grey-dark;
    box-shadow: inset 0px 0px 0px 2px @white;
  }

  input {
    visibility: hidden;
    position: absolute;
    right: -9999999999px;
  }
}