/* search forms */

.search-form {
  label { @include clearfix; width: 100% }
}
input:not([type="submit"]), textarea {
  max-width: 100%;
  background: transparent;
}

form  {
  label {
    color: $black;

    font-family: $serviceFont;
    @extend .demi-small;
    @extend .caps;
    @extend .thick;
    @extend .letter-spacing-2;
  }
  .form-control,
  input[type="text"], input[type="url"], input[type="password"], input[type="email"],  input[type="number"], textarea {
    outline: none;
    border: none;
    border-bottom: 2px solid $black;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    color: #202020;
    position: relative;
  }
  fieldset { margin-top: 3em }
}
label .required {
  @if ( true == $is_rtl ) {
    float: right;
  }
  @else {
    float: left;
  }
}

label i {
  @if ( true == $is_rtl ) {
    float: left;
  }
  @else {
    float: right;
  }
  width: 2em;
  height: 2em;
  text-align: center;
}

form.czr-form {
  input[type="text"], input[type="password"], input[type="email"] , textarea {
    width: 100%;
  }

  .form-group, .czr-focus {
    position: relative;
    margin-top: $base-line-height*2;
  }

  .czr-focus label {
    display: block;
    position: absolute;
    @include transition(transform 0.3s ease);
    span {
      @if ( true == $is_rtl ) {
          float: right;
      }
      @else {
          float: left;
      }
    }

    i.icn-close {
      @if ( true == $is_rtl ) {
          margin-left: -2em;
      }
      @else {
          margin-right: -2em;
      }
      border-radius:100%;
      height:2em;
      width:2em;
      line-height: 2em;
      @include opacity(0);
      @include transition(transform 0.3s ease);
      @include transform(translateY(-110%));
    }
  }

  .czr-focus {
    .czr-focusable { transition: all 600ms; }
    &:not(.in-focus) > .czr-focusable { color: transparent; }
    &.in-focus > label {
      z-index: 1;
      @include transform(translateY(-110%));
      color: $grey;
      i.icn-search { @include opacity(0); }
      i.icn-close {
        @include opacity(1);
        @include transform(translateY(110%));
        cursor: pointer;
      }
    }
  }

  .czr-search-field {
    @if ( true == $is_rtl ) {
        padding-left: 2em;
    }
    @else {
        padding-right: 2em;
    }

  }
}