@import "../typography/mixins";
@import "../mixins/variables";
@import "../mixins/colours";
@import "../mixins/viewport";
@import "../mixins/browser";

input[type="password"],
input[type="number"],
input[type="email"],
input[type="text"],
input[type="tel"],
input[type="url"] {
  @include antialiased;
  @include fontFamily("Body-WebS")
  border: $greyBorder 1px solid;
  border-radius: 0;
  color: $black;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 12px 10px 9px 10px;
  width: 100%;
  outline: none;
  &:active,
  &:focus,
  &.input-active {
    border-color: $black;
    color: $black;
  }
  &.input-error {
    border-color: $red;
    color: $red;
    &:focus {
      color: $black;
    }
  }
}

label.with-input {
  span, a {
    display: block;
    font-size: 12px;
    line-height: 12px;
    margin: 12px 0 7px;
    letter-spacing: 0.5px;
  }
  span {
    float: left;
    padding-left: 2px;
  }
  a {
    float: right;
  }
}

.input-error {
  @include antialiased;
  @include fontFamily("Body-WebS")
  color: $red;
  padding-left: 2px;
}

.search-box {
  box-sizing: border-box;
  $leftPadding: 10px;
  position: relative;
  font-size: 14px;
  // Remove unwanted X from IE in search to clear text
  &::-ms-clear {
    display: none;
  }
  @include viewport-maximum(tabletPortrait) {
    font-size: 16px;
  }
  .icon-search {
    position: absolute;
    left: $leftPadding;
    &:before {
      line-height: $eltHeightS;
      @include viewport-maximum(tabletPortrait) {
        line-height: $eltHeightM;
      }
    }
  }
  input.input-search {
    box-sizing: inherit;
    font-size: inherit;
    &.widen-on-focus {
      transition: width .3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
      &:focus {
        width: 240px;
      }
    }
    height: $eltHeightS;
    @include viewport-maximum(tabletPortrait) {
      height: $eltHeightM;
    }
    width: 140px;
    padding: 10px 10px 10px calc(#{$eltHeightS} + #{$leftPadding});
    @include viewport-maximum(tabletPortrait) {
      padding-left: calc(#{$eltHeightM} + #{$leftPadding});
    }
    background-color: $greyBackground;
    border: none;
    &:active,
    &:focus,
    &.input-active {
      width: $eltWidthM;
      }

    // input-placeholder cannot be hierarchical so must be done like this
    &::-webkit-input-placeholder { /* WebKit browsers */
      color: $greyHeading;
    }
    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: $greyHeading;
    }
    &::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: $greyHeading;
    }
    &:-ms-input-placeholder { /* Internet Explorer 10+ */
      color: $greyHeading;
    }
  }
}