/*
* Form Module
*
*/


/*
* Variables
*/

$form: '.form';


/*
* SEARCH BAR
*/

#{$form}-search {
  position: relative;

  input {
    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
    box-sizing: border-box;
    border: 1px solid $white;
    color: $blue-600;
    font-size: 16px;
    height: $unit * 4;
    line-height: $unit * 4;
    outline: none;
    padding: 0 ($unit *2) 0 ($unit * 4);
    transition: all .2s;

    // PLACEHOLDER TEXT
    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: $blue-grey-100;
      font-size: 14px;
    }
    &::-moz-placeholder { /* Firefox 19+ */
      color: $blue-grey-100;
      font-size: 14px;
    }
    &:-ms-input-placeholder { /* IE 10+ */
      color: $blue-grey-100;
      font-size: 14px;
    }
    &:-moz-placeholder { /* Firefox 18- */
      color: $blue-grey-100;
      font-size: 14px;
    }

    &:active,
    &:focus {
      border: 1px solid $blue-400;
      box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
    }
  }

  .material-icons {
    color: $blue-grey-100;
    font-size: 20px;
    left: $unit;
    position: absolute;
    top: 6px;
    z-index: $layer-1;
  }
}

/*
* Select Menu
*/

$form-select-width: 200px;

#{$form}-select-menu {
  position: relative;
  width: $form-select-width;

  .overlay {
    display: none;
    z-index: $layer-1;

    &.visible {
      display: block;
    }
  }

  #{$form}-select-button {
    background: $white;
    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
    box-sizing: border-box;
    border: 1px solid $white;
    color: $blue-grey-600;
    font-size: 12px;
    font-weight: 400;
    height: $unit * 4;
    line-height: $unit * 4;
    outline: none;
    padding: 0 ($unit * 2);
    text-align: left;
    width: $form-select-width - ($unit * 2);

    strong {
      font-weight: 600;
      margin-right: $unit;
      text-transform: uppercase;
    }

    &.has-symbol {
      .symbol {
        margin-right: $unit;
      }
    }
  }

  #{$form}-select-dropdown {
    background: $white;
    box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
    border-radius: 4px;
    display: none;
    left: -$unit;
    list-style-type: none;
    margin: 0;
    padding: $unit 0;
    position: absolute;
    top: -$unit;
    width: 200px;
    z-index: $layer-2;

    &.visible {
      display: block;
    }

    li {
      cursor: pointer;
      font-size: 14px;
      line-height: $unit * 4;
      margin: 0;
      padding: 0 ($unit * 2) 0 ($unit * 5);
      position: relative;
      transition: all .2s;

      &:hover {
        background: $blue-grey-50;
      }

      .symbol {
        left: $unit * 2;
        position: absolute;
        top: $unit;
        z-index: $layer-5;
      }
    }
  }
}