@import "mixins.less";

@selected: #494D53;
@blurColor: #494D53;
@height: 40px;

.mb_sprite{ background: url('/public/images/structure/mobile_sprite.svg'); background-size: 150px 70px; }

// Show mobile header
.mobile{ display: block; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%;
  p{ line-height: 1.6; }
  header{ position: relative; width: 100%; height: @height; background: #fff; }
  .mobile_btn{ position: relative; width: @height; height: 100%; cursor: pointer;
    .icon{ display: block; position: absolute; top: 50%; left: 50%; .mb_sprite}
    &.nav{ margin-left: 30px; float: left; border-right: 1px solid #fff;
      .icon{ margin: -7px 0 0 -9px; width: 18px; height: 15px; background-position: -10px -40px; }
      &:hover:not(.selected) .icon{ background-position: -10px -10px; }
    }
    &.contact{ margin-right: 30px; float: right; border-left: 1px solid #fff;
      .icon{ margin: -10px 0 0 -10px; width: 20px; height: 20px; background-position: -70px -40px; }
      &:hover:not(.selected) .icon{ background-position: -70px -10px; }
    }
    &.selected .icon{ background-position: -40px -10px; margin-top: -6px;
      &:hover .icon{ background-position: -40px -10px; margin-top: -6px }
    }
  }
  .logo{ display: block; position: absolute; left: 50%; margin: 0 0 0 -80px; width: 160px; height:30px; color: #494D53; text-align: center; text-decoration: none; line-height: 40px; cursor: pointer; }
  .mb_content{ position: relative; overflow-y: scroll; .opacity(1); border: none;
    nav{ position: relative; overflow: hidden; height: 0;
      ul{ display: block; margin: 0; padding: 0; width: 100%; background: #F7F8F9;
        li{ display: block; position: relative; width: 100%;
          .title{ display: block; position: relative; padding: 0 0 0 40px; width: 100%; height: @height - 1px; border-bottom: 1px solid #DFE5E9; color: #A9AAAC; font-family:'Chaparral W01 SmBd'; font-size: 12px; text-transform: uppercase; line-height: @height; .box-sizing(border-box); cursor: pointer;
            &:hover{ background: #fff; }
            .dd_arrow{ display: block; position: absolute; left: 30px; top: 50%; margin: -2px 0 0 -5px; width: 10px; height: 6px; .mb_sprite; background-position: -100px -10px; }
          }
          &.selected .title{ color: @selected;
            .dd_arrow{ background-position: -100px -24px; }
          }
          &.mb_dropdown{ display: block;
            ul{ display: block; position: relative; overflow: hidden; padding: 0; height: 0;
              li{
                .title{ padding-left: 90px; background: #fff; color: #9999A2; font-weight: 400;
                  .dd_arrow{ left: 65px; background-position: -100px -10px; }
                  &:hover{ background: #FBFBFC; }
                }
                &.selected .title{ color: @selected;
                  .dd_arrow{ background-position: -100px -24px; }
                }
                &.mb_dropdown{ display: block;
                  ul{ display: block; position: relative; overflow: hidden; padding: 0; height: 0;
                    li{
                      .title{ padding-left: 120px; height: 39px; border-bottom: 1px solid #fff; background: #EAEAEA; color: #575765; font-weight: 300; line-height: 40px;
                        &:hover{ background: #F7F8F9; }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    #mobile_contact{ position: relative; overflow: hidden; height: 0; background: #fff; font-size: 1em; line-height: 1.2;
      .inner{ padding: 40px; .box-sizing(border-box);
        .title{ display: block; margin-bottom: 1em; color: @selected; font-size: 1.375em; }
        .data_title{ display: inline-block; width: 60px; color: @selected; font-family:'Chaparral W01 SmBd'; font-size: 12px; text-transform: uppercase; }
      }
    }
  }
  .blur{ display: none;  position: fixed; top: 0; left: 0; z-index: -1; width: 100%; background: @blurColor; .opacity(0); }

  &.phone{
    .mb_content nav ul li .title:hover{ background: none; }
    .mb_content nav ul li.mb_dropdown ul li .title:hover{ background: #fff }
    .mb_content nav ul li.mb_dropdown ul li.mb_dropdown ul li .title:hover{ background: #EAEAEA !important; }
  }
}