@import 'xtend-library/src/core/form/_form.less';

/**
 * vars
 */

// select

@select-arrow-size: 4px; // in px
@select-space-size: 35px; // in px

/**
 * fieldset
 */

fieldset, .fieldset {
  & + & {
    .margin(top, medium);
  }
}

/**
 * legend
 */

legend, .legend {
  .full();
  .h4();
  .header-line();
}

/**
 * form-group
 */

.form-group {
  position: relative;
}

// set group variant (for specificity must be before classes used)

.form-group {
  .form-default & {
    .form-group.form-group-medium();
  }
  .form-inverse & {
    .form-group.form-group-medium();
  }
}

// set group size (for specificity must be before classes used)

.form-small {
  .form-group {
    .form-group.form-group-small();
  }
  button[type='submit'] {
    .btn-medium();
    .btn-wide();
  }
}

.form-medium {
  .form-group {
    .form-group.form-group-medium();
  }
  button[type='submit'] {
    .btn-large();
    .btn-wide();
  }
}

.form-large {
  .form-group {
    .form-group.form-group-large();
  }
  button[type='submit'] {
    .btn-big();
    .btn-wide();
  }
}

// size

.form-group.form-group-small {
  .padding(bottom, 1.5rem);
  font-size: 1.2rem;
}

.form-group.form-group-medium {
  .padding(bottom, 1.5rem);
  font-size: 1.4rem;
}

.form-group.form-group-large {
  .padding(bottom, 1.5rem);
  font-size: 1.6rem;
}

// mode

.form-group-horizontal {
  display: flex;
  .row-space-x(medium);
  align-items: center;
  text-align: right;
  .form-label {
    margin: 0;
  }
}

.form-group-horizontal-sm {
  @media @min-sm {
    .form-group-horizontal();
  }
}

.form-group-inline {
  display: flex;
  flex-wrap: wrap;
  .list-space-x(medium);
  align-items: baseline;
  .form-item {
    width: auto;
  }
}

.form-group-inline-sm {
  @media @min-sm {
    .form-group-inline();
  }
}

/**
 * form-label
 */

.form-label {
  .margin(bottom, 1em); // size in em inherit .form-group size
  .font-sans-semibold();
  .line-height-small();
  font-size: 0.9em; // size in em inherit .form-group size
  letter-spacing: .025em;
  text-transform: uppercase;
}

// set label variant (for specificity must be before classes used)

.form-label {
  &.form-label.form-label-default, .form-default & {
    .form-label-default();
  }
  &.form-label.form-label-inverse, .form-inverse & {
    .form-label-inverse();
  }
}

// variant

.form-label-default {
  .text-default();
  color: @text-light;
}

.form-label-inverse {
  .text-inverse();
  color: @text-inverse-light;
}

/**
 * form-item
 */

.form-item {
  padding: .75em 1.2em; // size in em inherit .form-group size
  .font-sans-regular();
  .line-height-small();
  font-size: 1em; // size in em inherit .form-group size
}

// set item variant (for specificity must be before classes used)

.form-item {
  &.form-item.form-item-default, .form-default & {
    .form-item-default();
  }
  &.form-item.form-item-inverse, .form-inverse & {
    .form-item-inverse();
  }
}

// variant

.form-item-default {
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: @shade-200;
  background-color: @shade-100; // @FIX no background: or it overrides background-image
  color: @text;
  &:focus, &.active {
    border-color: @shade-200;
    background-color: @shade-200; // @FIX no background: or it overrides background-image
    color: @text;
  }
  // placeholder
  &:-ms-input-placeholder {
    color: @text-light;
  }
  &:-moz-placeholder {
    color: @text-light;
  }
  &::-webkit-input-placeholder {
    color: @text-light;
  }
  &::-ms-input-placeholder {
    color: @text-light;
  }
  &::-moz-placeholder {
    color: @text-light;
  }
  &::placeholder {
    color: @text-light;
  }
  // validation
  &.valid {
    border-color: @success !important;
  }
  &.invalid {
    border-color: @error !important;
  }
}

.form-item-inverse {
  border-radius: 0;
  border-width: 0;
  border-style: solid;
  border-bottom-width: 2px;
  border-color: transparent;
  background-color: fade(@shade-700, 20%); // @FIX no background: or it overrides background-image
  color: @text-inverse;
  &:focus, &.active {
    border-color: @white;
    background-color: fade(@shade-700, 40%); // @FIX no background: or it overrides background-image
    color: @text-inverse;
  }
  // placeholder
  &:-ms-input-placeholder {
    color: @text-inverse-light;
  }
  &:-moz-placeholder {
    color: @text-inverse-light;
  }
  &::-webkit-input-placeholder {
    color: @text-inverse-light;
  }
  &::-ms-input-placeholder {
    color: @text-inverse-light;
  }
  &::-moz-placeholder {
    color: @text-inverse-light;
  }
  &::placeholder {
    color: @text-inverse-light;
  }
  // validation
  &.valid {
    border-color: @success !important;
  }
  &.invalid {
    border-color: @error !important;
  }
}

// animation

.form-item {
  transition: color @time-small @ease-out, border @time-small @ease-out, background-color @time-small @ease-out;
  &:focus, &.active {
    transition: color @time-small @ease-in, border @time-small @ease-in, background-color @time-small @ease-in;
  }
}

/**
 * textarea
 */

.form-item {
  textarea& {
    resize: vertical;
    height: 10rem;
  }
}

/**
 * select
 */

.form-item {
  select:not([multiple])& {
    &.form-item-default, .form-default & {
      @select-arrow-color: @text;
      @select-space-color: fade(@shade-700, 10%);
      background-image: linear-gradient(45deg, transparent 50%, @select-arrow-color 50%), linear-gradient(135deg, @select-arrow-color 50%, transparent 50%), linear-gradient(to right, @select-space-color, @select-space-color);
    }
    &.form-item-inverse, .form-inverse & {
      @select-arrow-color: @text-inverse;
      @select-space-color: fade(@shade-700, 10%);
      background-image: linear-gradient(45deg, transparent 50%, @select-arrow-color 50%), linear-gradient(135deg, @select-arrow-color 50%, transparent 50%), linear-gradient(to right, @select-space-color, @select-space-color);
    }
  }
  select[multiple]& {
    max-height: 10rem;
    overflow-x: hidden;
    overflow-y: auto;
    .overflow-style(@mode: inner);
    option {
      padding: .5rem 0;
    }
  }
}

/**
 * check and radio
 */

// label

.checkradio-label {
  .margin(all, auto);
  .font-sans-regular();
  .line-height-small();
  font-size: 0.9em; // size in em inherit .form-group size
  letter-spacing: 0;
  text-transform: none;
  // variant
  &.form-label.form-label-default, .form-default & {
    color: @text;
  }
  &.form-label.form-label-inverse, .form-inverse & {
    color: @text-inverse;
  }
}

// styled

.checkbox, .radio {
  .full();
  .form-label();
  .checkradio-label() !important;
  padding-left: 26px !important;
  &:before, &:after {
    top: 1px;
    width: 16px;
    height: 16px;
  }
  // variant
  &.form-label.form-label-default, .form-default & {
    &:before {
      background: @shade-100;
      border: 1px solid @shade-200;
    }
    &:after {
      color: @accent;
    }
  }
  &.form-label.form-label-inverse, .form-inverse & {
    &:before {
      background: fade(@shade-700, 20%);
      border: 1px solid fade(@shade-700, 10%);
    }
    &:after {
      color: @white;
    }
  }
}

.checkbox {
  &:before {
    border-radius: 2px;
  }
  &:after {
    .icon-xt();
    content: @icon-xt-check;
    font-size: 100%;
  }
}

.radio {
  &:before {
    border-radius: 50%;
  }
  &:after {
    .icon-xt();
    content: @icon-xt-circle;
    font-size: 50%;
  }
}

// unstyled

.checkradio-label-unstyled {
  .checkradio-label() !important;
  .padding(left, small) !important; // space from checkbox/radio
  top: -3px !important;
}

// validation

input[type="checkbox"], input[type="radio"] {
  &.valid {
    & ~ .form-label:before {
      border-color: @success !important;
    }
  }
  &.invalid {
    & ~ .form-label:before {
      border-color: @error !important;
    }
  }
}

// animation

.checkbox, .radio {
  &:before {
    transform: scale(.9);
    transition: all @time-small @ease-out;
  }
  &:after {
    opacity: 0;
    transform: scale(.9);
    transition: all @time-small @ease-out;
  }
  &.active {
    &:before {
      transform: scale(1);
      transition: all @time-small @ease-in;
    }
    &:after {
      opacity: 1;
      transform: scale(1);
      transition: all @time-small @ease-in;
    }
  }
  &.focus, &:focus {
    &.form-label.form-label-default, .form-default & {
      &:before {
        border: 1px solid @accent;
      }
    }
    &.form-label.form-label-inverse, .form-inverse & {
      &:before {
        border: 1px solid fade(@white, 50%);
      }
    }
  }
}

/**
 * form-note
 */

.form-note {
  .note();
  .note-default();
  .note-small();
  .muted();
  .margin(y, small);
  .margin(y, layout);
}

/**
 * validation
 */

.form-item {
  &:invalid {
    box-shadow: none !important;
  }
}