/*
@styleguide
@title Forms


<div class="psg-subsection">
  <h3 class="psg-h3">Form fields</h3>
  <form>

    <div class="row">
      <div class="col-xs-12 col-md-6">
        <fieldset class="form-group">
          <label for="input1">Input field heading 13px <i class="icon-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i></label>
          <input type="email" class="form-control" id="input1" placeholder="Input field placeholder" >
          <!-- <small class="text-muted">Muted text to be placed here.</small> -->
        </fieldset>
      </div>
      <div class="col-xs-12 col-md-6">
        <fieldset class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </fieldset>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6">
        <fieldset class="form-group">
          <label for="input1">Input field heading 13px <i class="icon-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i></label>
          <input type="email" class="form-control" id="input1" placeholder="Input field placeholder" >
          <!-- <small class="text-muted">Muted text to be placed here.</small> -->
        </fieldset>
      </div>
      <div class="col-xs-12 col-md-6">
        <fieldset class="form-group">
          <label for="exampleSelect1">Example select</label>
          <select class="form-control custom-select" id="exampleSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </fieldset>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-6">
        <fieldset class="form-group">
          <label for="exampleTextarea">Example textarea</label>
          <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
        </fieldset>
      </div>
      <div class="col-xs-12 col-md-6">
        <fieldset class="form-group">
          <label for="exampleTextarea">Example textarea</label>
          <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
        </fieldset>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <fieldset class="form-group">
          <div class="radio">
            <label>
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
              Option one is this and that&mdash;be sure to include why it's great
            </label>
          </div>
          <div class="radio">
            <label>
              <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
              Option two can be something else and selecting it will deselect option one
            </label>
          </div>
          <div class="radio disabled">
            <label>
              <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
              Option three is disabled
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Check me out
            </label>
          </div>
        </fieldset>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <fieldset class="form-group">
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-radio active">
              <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
            </label>
            <label class="btn btn-radio">
              <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
            </label>
            <label class="btn btn-radio">
              <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
            </label>
          </div>
        </fieldset>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <button type="submit" class="btn btn-lg progress-button" data-style="rotate-angle-bottom" data-perspective data-horizontal>Submit</button>
        <button type="button" class="btn btn-link">Cancel</button>
      </div>
    </div>

  </form>
</div>


<div class="psg-subsection">
  <h3 class="psg-h3">Switch</h3>

  <div class="switch">
    <span class="switch-base"></span>
    <input type="checkbox" class="isServices" id="servicescheck1" name="roles[services]">
    <span class="switcher"></span>
    <label for="servicescheck1" class="switch-label">Heading to be placed here 14px Heading to be placed here 14px
      <i class="icon-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top"></i>
    </label>
  </div>
  
</div>


*/






/*Theme style starts--------------------------------------------------------*/


/* mixins at top */
@define-mixin bracket-title{
  font-size: 0.7em;
  color: $primarycolour;
  font-family: $regularweight;
  margin: 7px 20px 10px 0;
  padding: 0 0 0 14px;
  height: 10px;
  border-bottom: 1px solid $borders;
  position: relative;
  span{
    background: $white;
    padding: 0 13px;
  }
  &:before, &:after{
    position: absolute;
    left: 0px;
    top: 9px;
    content: '';
    background: $borders;
    width: 1px;
    height: 7px;
    display: block;
  }
  &:after{
    left: auto;
    right: 0;
  }
}
/* end mixins */




legend{
  @mixin bracket-title;
}

.checkbox-inline, .radio-inline{
  span{
    padding-left: 4px;
  }
}
fieldset{
  border: 0;
}
input[type="radio"], input[type="checkbox"]{
  position: relative;
}
input[type="radio"]{
  border-radius: 50%;
}
input[type="checkbox"]:checked, input[type="radio"]:checked{
  background: #1B234C;
  border-color: #1B234C;
  &:focus{
    outline: none;
    border-color: #fff;
  }
}
input[type="checkbox"]:before, input[type="checkbox"]:checked:before,
input[type="radio"]:before, input[type="radio"]:checked:before{
  position:absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 11px;
  text-align: center;
  content: "\e652";
  color: #fff;
  font-family: 'icomoon';
  font-size: 0.7rem;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
input[type="radio"]:before, input[type="radio"]:checked:before{
  content: "•";
  top: 0;
  font-size: 0.85rem;
}

.input-group {
  position: relative;
  display: table;
  border-collapse: separate;

  .form-control {
    display: table-cell;
    float: left;
    width: 99%;
    position: relative;
  }
}

.input-group-btn {
  position: relative;
  white-space: nowrap;
  vertical-align: middle;
  width: 1%;
  display: inline-block;
}

.btn.search-icon {
  height: 48px;

  &:hover {
    .icon-search {
      color: $white;
    }
  }
}

.search-container {
  padding: 0 60px;

  input {
    position: relative;
    left: -12px;
  }
}

/* Inputs / Selects / Forms etc.
// ============================== */

input[type=text], input[type=email], input[type=password], button, input[type=search], input[type=url],
input[type=number], textarea, select, input[type=date], input[type=month], input[type=week], input[type^=datetime] {
  /*this causes crazy stuff in firefox, probably best not to set it here */
  /*padding: 0.6em */
  appearance: none;
  box-sizing: border-box;
}

/* ==============================
// Styling
// ============================== */

input[type=text], input[type=email], input[type=password], input[type=search], input[type=url],
input[type=number], textarea, select, input[type=date], input[type=month],
input[type=week], input[type^=datetime],
.form-group select,
.form-group textarea {
  @mixin btn-lg;
  font-family: $primaryfont;
  border-radius: $borderradius;
  appearance: none;
  margin-bottom: 0.5em;
  border: none;
  width: 100%;
  border: none;
  background-color: $grey;
  color: $black;

  &:focus {
    outline: none;
    background: $fieldhighlight;
  }
}



input:focus::-webkit-input-placeholder,
input:focus:-moz-placeholder,
input:focus::-moz-placeholder,
input:focus:-ms-input-placeholder {
  color: $primarycolour;
}


form{

  label {
    display: block;
    font-family: $primaryfontbold;
    font-size: 0.8125rem;
    margin-bottom: calc($controlmargin / 2);
    color: $primarycolour;
  }

  .radio,
  .checkbox{
    label{
      font-family: $primaryfont;
      color: $black;
    }
  }
}

.icon-info{
  width:15px;
  height:15px;
  background: $green;
  display: inline-block;
  border-radius: 50%;

  &:before{
    color: $white;
    text-align: center;
    display: block;
    margin: 0 auto;
    font-size: 11px;
    line-height: 1.5;
    position: relative;
  }
}


.label--solid{
  font-size: 0.6em;
  padding: 0.43em 0.9em 0.33em 0.9em !important;
  border-radius: 0 !important;
  display: inline-block !important;
}

.label--primary{
  background: $primarycolour;
  color: $white;
}
  
.label--highlight{
  background: $highlightcolour;
  text-shadow: none;
  color: $white;
}
  
.label--default{
  color: $darkgrey;
  text-shadow: none;
  background: $grey;
}

button {
  line-height: normal;

  &:focus {
    border: 1px solid darken($highlightcolour, 8);
    outline: none;
  }
}

/*
button, input[type=submit], input[type=reset] {
  @extend %button;
  @extend %button--default;
}*/

.label + .select, .label + .textarea{
  margin-top: -2px;
}

.textarea{
  resize: vertical;
  padding: 6px 12px;
  min-height: 110px;
}

.select{
  position: relative;
  height: 42px;
  margin-bottom: 10px;
  clear: both;
  select{
    height: 100%;
    width: 100% !important;
    font-size: 16px;
    &:empty + .arrow{
      display: none;
    }
  }
}

.custom-select{
  border-radius: $borderradius;
}

/* Apple style Switch*/
.switch{
  display: inline-block;
  position: relative;
  border: 0px;
  font-size: 0.875rem;
  font-family: $primaryfont;
  color: $black;


  &.disabled .switcher{
    background: $lightgrey;
    /*opacity: 0.1;*/

    &:before{
      content: "\e64f";
      color: $grey;
    }
    + .switch-label{
      color: $coolgrey2;
      /*+vendor(text-shadow, none);*/
      cursor: not-allowed;
    }
  }
  &.checked .switcher{
      left: 3px;
  }
  .switch-base{
    display: block;
    position: absolute;
    left: 10px;
    width: 20px;
    height: 25px;
    background: $lightgreyblue;
    border: 1px solid rgba(119, 102, 102, 0.13);
    border-width: 1px 0 1px;

    /*Background on left position*/
    &:before{
      content: '' !important;
      width: 25px;
      height: 25px;
      position: absolute;
      left: -10px;
      top: -1px;
      border: 1px solid rgba(119, 102, 102, 0.13);
      border-width: 1px 1px 1px 0;
      background: $lightgreyblue !important;
      /*+vendor(border-radius, 50%);*/
      border-radius: 50%;
      z-index: -1;
    }

    /*Background on right position*/
    &:after{
      content: '' !important;
      width: 25px;
      height: 25px;
      position: absolute;
      right: -10px;
      top: -1px;
      border: 1px solid rgba(119, 102, 102, 0.13);
      border-width: 1px 1px 1px 0;
      background: $lightgreyblue !important;
      /*+vendor(border-radius, 50%);*/
      border-radius: 50%;
      z-index: -1;
    }
  }
  input{
    border: none !important;
    position: absolute !important;
    height: 25px;
    width: 40px !important;
    left: 0px;
    top: 0px;
    background: none !important;
    z-index: 10;
    cursor: pointer;
    opacity: 0;

    &:before{
      display: none !important;
    }

    &:checked{
      + .switcher{
        left: 18px;
        background: $blue !important;

        &:before{
          content: '\e913';
          color: $white;
        }
      }

      + .switcher + .switch-label{
        /*color: $black;*/
        opacity: 1;
      }
    }
    &:disabled{
      + .switcher{
        background: $lightgrey;
        /*+vendor(box-shadow, 0px 2px 4px rgba(100,100,100,0.46));*/
        /*opacity: 0.7;*/
        &:before{
          content: "\d914";
          /*color: $grey;*/
        }
        + .switch-label{
          cursor: not-allowed;
        }
      }
    }
  }

  .switch-label{
    float: left;
    margin-left: 50px;
    line-height: 1.8;
    color: $black;
    opacity: .5;
  }
  

  .switcher{
    background: $red !important;
    color: $white !important;
    /*border: 1px solid #fff;*/
    /*+vendor(box-shadow, 0px 2px 4px rgba(113,0,87,0.50));*/
    /*+vendor(border-radius, 50%);*/
    border-radius: 50%;
    transition: .3s all;
    /*+vendor(transition, 0.3s all);*/
    width: 18px;
    height: 18px;
    position: absolute;
    left: 4px;
    margin-top: 3px;
    z-index: 9;
 
    &:before{
      content: "\e914";
      font-family: 'icomoon';
      line-height: 2;
      font-size: 0.45em;
      position: relative;
      margin:0 auto;
      text-align: center;
      display:block;
    }
  }  

  .icon-info{
    position: relative;
    top: 1px;
    margin-left:10px;
  }
  
}