@import "../variables.less";
@import "../mixins.less";

// Inputs
.form-list {
  .item-media {
    padding: .35rem 0;
    align-items: flex-start;
  }
  .item-content {
    display: flex;
    min-height: 2.2rem;
  }
  input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="number"], select, textarea {
    appearance: none;
    box-sizing: border-box;
    border: none;
    background: none;
    border-radius: 0 0 0 0;
    box-shadow: none;
    display: block;
    padding: 0px;
    margin: 0;
    width: 100%;
    height: 43px;
    color: #000;
    font-size: 17px;
    font-family: inherit;

  }
  .item-title.label {
    vertical-align: top;
    line-height: 1.4rem;
    + .item-input {
      margin-left: 5px;
    }
  }
  input[type="date"], input[type="datetime-local"] {
    line-height: 44px;
  }
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
  }
  textarea {
    height: 100px;
    resize:none;
    line-height: 1.4;
    padding-top: 8px;
    padding-bottom: 7px;
    &.resizable {
      height: 43px;
    }
  }
  .item-input {
    width: 100%;
    margin-top: -.4rem;
    margin-bottom: -.4rem;
    -webkit-box-flex:1;
    -ms-flex:1;
    .flex-shrink(1);
  }
  .item-title.label {
    width: 35%;
    .flex-shrink(0);
  }

  .item-after {
    min-width: 2.5rem;
    .button {
      display: inline-block;
    }
  }

  .button {
    height: 1.4rem;
    line-height: 1.4rem;
  }

  .label-switch {
    margin-top: .3rem;
  }

  .list-append {
    margin-top: .3rem;
  }
}


// Slider
.range-slider {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-left: 3px;
  padding-right: 3px;
  margin-left: -1px;
  .align-self(center);
  input[type="range"] {
    position: relative;
    height: 28px;
    width: 100%;
    margin: 4px 0 5px 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #b7b8b7), color-stop(100%, #b7b8b7));
    background: linear-gradient(to right, #b7b8b7 0, #b7b8b7 100%);
    background-position: center;
    background-size: 100% 2px;
    background-repeat: no-repeat;
    outline: 0;
    border: none;
    box-sizing: content-box;
    -ms-background-position-y: 500px;
    &:focus, &:active {
      border: 0;
      outline: 0;
    }
  }



  // Range thumb mixin
  .range-thumb() {
    height: 28px;
    width: 28px;
    border-radius: 28px;
    background: #fff;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    border: 0;
    outline: 0;
    position: absolute;
    box-sizing: border-box;
    content: ' ';
  }

  // ======= WebKit/Blink ========

  // Before Track
  input[type="range"]:after {
    height: 2px;
    background: #fff;
    content:' ';
    width: 5px;
    top: 50%;
    margin-top: -1px;
    left: -5px;
    z-index: 1;
    position: absolute;
  }
  // Thumb
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border: none;
    height: 28px;
    width: 28px;
    position: relative;
    background: none;
  }
  input[type="range"]::-webkit-slider-thumb:after {
    .range-thumb();
    left: 0;
    top: 0;
  }
  // Track Active Highlight
  input[type="range"]::-webkit-slider-thumb:before {
    position: absolute;
    top: 50%;
    right: 100%;
    width: 2000px;
    height: 2px;
    margin-top: -1px;
    z-index: 1;
    background: @color-primary;
    content: ' ';
  }

  // ======= FireFox ========
  input[type="range"]::-moz-range-track {
    width: 100%;
    height: 2px;
    background: #b7b8b7;
    border: none;
    outline: 0;
  }
  input[type="range"]::-moz-range-thumb {
    .range-thumb();
  }

  // ======= IE ========
  input[type="range"]::-ms-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
  input[type="range"]::-ms-thumb {
    .range-thumb();
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.2);
    box-sizing: border-box;
    margin-top: 0;
    top: 50%;
  }

  input[type="range"]::-ms-fill-lower {
    background: @color-primary;
  }
  input[type="range"]::-ms-fill-upper {
    background: #b7b8b7;
  }

}



// Smart selects
.smart-select {
  select {
    display: none;
  }
}