//
// Form controls
// --------------------------------------------------


// Input, Textarea, select

.input,
.textarea,
.select > select {
  display: block;
  border: @border-width solid @input-border-color;
  line-height: @line-height-base;
  padding: (@padding-small-vertical - (@border-width*2)) @padding-small-horizontal;
  width: 100%;
  background-color: @color-back;
  -webkit-appearance: none;
  // border-radius: 0; // reset safari style
  min-height: (30*@rem);
  transition: border @animation-speed-fast @animation-type, box-shadow @animation-speed-fast @animation-type;
  box-shadow: none;
  color: inherit;

  &:hover {
    border-color: darken(@input-border-color, 20%);
  }

  &:focus {
    border-color: @color-focus;
    outline: none;
    box-shadow: 0 0 0 (2*@rem) fade(@color-focus, 30%);
  }

  &[readonly],
  &[disabled], .disabled {
    opacity: 1!important;
    background-color: darken(@color-back, 10%);
  }
}

.select {
  position: relative;

  > select {
    outline: none;
    border-radius: 0;

    &:not([multiple]) {padding-right: (25*@rem);}

    &[multiple] {
      max-height: (75*@rem);
      overflow-y: auto;
    }
  }

  &:not(.multiple):after {
    content: ' ';
    display: block;
    position: absolute;
    right: (10*@rem);
    top: (11*@rem);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: (7*@rem) (5*@rem) 0 (5*@rem);
    border-color: @input-border-color transparent transparent transparent;
  }
}


// Help text

.help-text {
  font-size: @font-size-small;
  color: @color-gray;
  padding: @padding-small-vertical 0;

  &:empty {display: none}
}


// Radio and checkbox

.radio,
.checkbox {
  position: relative;

  > input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
  }

  > input + label {
    position: relative;
    z-index: 0;
    padding: @padding-small-vertical 0 @padding-small-vertical (25*@rem);
    display: block;

    &:before,
    &:after {
      content: ' ';
      display: flex;
      position: absolute;
      left: 0;
      top: (@padding-small-vertical + (1*@rem));
      height: (18*@rem);
      width: (18*@rem);
      align-items: center;
      justify-content: center;
      color: transparent;
      border: (@border-width * 2) solid @color-gray;
      .transition-fast();
    }
  }

  > input + label:after {
    opacity: 0;
    transform: scale(0);
    color: @color-gray;
  }

  > input:focus + label:before {
    border-color: @color-primary;
    box-shadow: inset 0 0 0 (1*@rem) fade(@color-focus, 30%), 0 0 0 (2*@rem) fade(@color-focus, 30%);
  }

  &.checked > input + label:after,
  > input:checked + label:after {
    opacity: 1;
    transform: scale(1);
  }

  > input[disabled], > input.disabled {
    opacity: 0!important;

    + label {opacity: @state-disabled-opacity;}
  }

  &.inline-block + .inline-block {
    margin-left: (1*@rem);
  }
}

.checkbox > input {
  + label:before {
    border-radius: @border-radius-small;
  }

  + label:after {
    .icon-zenicon();
    content: @icon-check;
    border: none;
  }

  &:focus + label:after {
    color: @color-primary;
  }

  &:checked + label:before,
  &:checked + label:after {
    color: @color-white;
    background-color: @color-primary;
    border-radius: @border-radius-small;
  }
}

.radio > input {
  + label:before {border-radius: 50%;}

  + label:after {
    width: (8*@rem);
    height: (8*@rem);
    background-color: @color-gray;
    border-radius: (4*@rem);
    border: none;
    left: (5*@rem);
    top: (@padding-small-vertical + (6*@rem));
  }

  &:focus + label:after {background-color: @color-primary;}

  &:checked + label:before {
    border-color: @color-primary;
  }

  &:checked + label:after {
    background-color: @color-primary;
  }
}


// Control

.control {
  > label {
    display: block;
    // font-weight: bold;
    padding: @padding-small-vertical 0;
    font-size: @font-size-small;
  }

  &:not(:last-child) {margin-bottom: (@space/2);}


}

::-webkit-input-placeholder {
  font-size: (12*@rem);
}

.control {
  &.has-label-left,
  &.has-btn-right,
  &.has-icon-right {
    position: relative;
  }

  &.has-label-left {
    > label {
      position: absolute;
      left: (5*@rem);
      top: 0;
      min-width: (2*@rem);
      text-align: center;
      opacity: .5;
    }

    .input,
    .textarea,
    .select > select {
      padding-left: (25*@rem);

      &:focus + label {
        color: @color-focus;
        opacity: 1;
      }
    }
  }

  &.has-btn-right,
  &.has-icon-right {
    > .icon {
      position: absolute;
      right: (5*@rem);
      top: (4*@rem);
      min-width: (20*@rem);
      text-align: center;
      opacity: .5;
    }

    .input,
    .textarea,
    .select > select {
      padding-right: (25*@rem);

      &:focus + .icon,
      &:focus + label + .icon {
        opacity: 1;
      }
    }
  }

  &.has-btn-right {
    > .btn {
      position: absolute;
      right: 0;
      top: 0;
      min-width: (20*@rem);
      text-align: center;
      opacity: .5;
    }
  }
}

.row, .column {.control {width: 100%}}


// Control state

.control.has-error {
  .input,
  .textarea,
  .select > select {border-color: @color-danger;}
  .help-text       {color: @color-danger;}
}

.control.has-success {
  .input,
  .textarea,
  .select > select {border-color: @color-success;}
  .help-text       {color: @color-success;}
}

.control.has-warning {
  .input,
  .textarea,
  .select > select {border-color: @color-warning;}
  .help-text       {color: @color-warning;}
}


// Search control
.control.search {
  position: relative;
  margin: 0;

  > label {
    position: absolute;
    height: (30*@rem);
    min-width: (30*@rem);
    padding: 0;
    line-height: (30*@rem);
    text-align: center;
    opacity: .6;
    transition: transform @animation-speed-fast @animation-type, opacity @animation-speed-fast @animation-type;
  }

  > .input {
    padding-left: (30*@rem);
    padding-right: (30*@rem);
    transition: all @animation-speed-fast @animation-type;
  }

  > .close {
    display: block;
    position: absolute;
    height: (30*@rem);
    min-width: (30*@rem);
    line-height: (30*@rem);
    text-align: center;
    right: 0;
    top: 0;
    opacity: 0.6;
    transform: scale(1);
    transition: transform @animation-speed-fast @animation-type, opacity @animation-speed-fast @animation-type;
    cursor: pointer;
  }

  &:not(.empty),
  &.focus {
    > .input {
      padding-left: (5*@rem);
    }

    > label {
      opacity: 0;
      transform: scale(0);
    }
  }

  &.empty {
    > .close {
      opacity: 0;
      transform: scale(0);
    }
  }
}


// Flex control group

.control.flex {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;

  > .select,
  > .textarea,
  > .input {
    flex: auto;
    width: auto;
  }

  > label {
    font-weight: normal;
    width: (60*@rem);
    align-self: flex-start;
    font-size: @font-size-base;
  }

  > label,
  > div,
  > span,
  > .addon,
  > .btn {
    flex: none;
  }

  > .block,
  > .help-text {
    flex: auto;
    width: 100%;
    margin-bottom: 0;
  }

  > .addon {
    line-height: @line-height-base;
    padding: (@padding-small-vertical - @border-width) @padding-small-horizontal;
    border: @border-width solid @input-border-color;
    background-color: @color-gray-light;
  }

  > *:first-child {
    border-right: none;
  }

  > .btn:last-child {
    border-left: none!important;
  }
}

// clean readonly input box

.clean.input[readonly] {
  padding: 0;
  border-color: transparent;
  min-height: inherit;
  line-height: inherit;
}