/**
 * label
 */

.form-label {
  cursor: pointer;
  display: inline-block;
  // fix inline-block spacing
  vertical-align: middle;
}

/**
 * item
 */

.form-item {
  .full();
  // block fixes select and textarea space below
  display: block;
  &:focus, &.active {
    z-index: @index-active;
  }
}

/**
 * textarea
 */

.form-item {
  textarea& {
    &.textarea-autosize {
      overflow: hidden;
      resize: none;
    }
  }
}

/**
 * select
 */

.form-item {
  select:not([multiple])& {
    .padding(right, @select-space-size) !important;
    white-space: normal;
    background-position: calc(~'100% - ' @select-space-size / 2) 50%, calc(~'100% - (' @select-space-size / 2~') + '@select-arrow-size) 50%, 100% 0;
    background-size: @select-arrow-size @select-arrow-size, @select-arrow-size @select-arrow-size, @select-space-size 100%;
    background-repeat: no-repeat;
  }
}

/**
 * check and radio
 */

.checkbox, .radio {
  position: relative !important;
  &:not(.disabled) {
    cursor: pointer;
  }
  // check and radio styled design
  &:before, &:after {
    content: '';
    position: absolute !important;
    top: 0;
    left: 0;
  }
  &:before {
    pointer-events: none;
  }
  &:after {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

// styled

input[type="checkbox"]:not(.unstyled), input[type="radio"]:not(.unstyled) {
  position: absolute !important;
  z-index: -1 !important;
  opacity: 0 !important;
}

input[type="checkbox"]:not(.unstyled) {
  & ~ .form-label {
    .checkbox();
  }
}

input[type="radio"]:not(.unstyled) {
  & ~ .form-label {
    .radio();
  }
}

// pseudo

input[type="checkbox"]:not(.unstyled) {
  // focus
  &:focus ~ .form-label {
    .checkbox.focus();
  }
  // active
  &:checked ~ .form-label {
    .checkbox.active();
  }
  // disabled
  &:disabled ~ .form-label {
    .disabled();
  }
}

input[type="radio"]:not(.unstyled) {
  // focus
  &:focus ~ .form-label {
    .radio.focus();
  }
  // active
  &:checked ~ .form-label {
    .radio.active();
  }
  // disabled
  &:disabled ~ .form-label {
    .disabled();
  }
}

// unstyled

input[type="checkbox"].unstyled, input[type="radio"].unstyled {
  display: block;
  float: left;
  & ~ .form-label {
    display: block;
    overflow: hidden;
  }
  & ~ .form-label {
    .checkradio-label-unstyled() !important;
  }
}