@import "mixins.less";

@selected: #96C551;
@blurColor: #96C551;

// Show mobile header
.mobile{ display: block; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%;
  header{ position: relative; width: 100%; height: 60px; background: #212121; }
  .mobile_btn{ position: relative; width: 60px; height: 100%; cursor: pointer;
    .icon{ display: block; position: absolute; top: 50%; left: 50%; background: url('/images/structure/mobile_sprite.png'); }
    &.nav{ float: left; border-right: 1px solid #575765;
      .icon{ margin: -7px 0 0 -9px; width: 18px; height: 15px; background-position: -10px -40px; }
      &:hover:not(.selected) .icon{ background-position: -10px -10px; }
    }
    &.contact{ float: right; border-left: 1px solid #575765;
      .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; top: 50%; left: 50%; margin: -15px 0 0 -65px; width: 130px; height:30px; background: url('/images/structure/yoda_sprite.png') -10px -10px; }
  .mb_content{ position: relative; overflow-y: scroll;
    nav{ position: relative; overflow: hidden; height: 0;
      ul{ display: block; width: 100%; background: #F7F8F9;
        li{ display: block; position: relative; width: 100%;
          .title{ display: block; position: relative; padding: 0 0 0 60px; width: 100%; height: 59px; border-bottom: 1px solid #DFE5E9; color: #575766; font-size: 1.142857143em; font-weight: 600; line-height: 60px; .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; background: url('/images/structure/mobile_sprite.png') -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: 1.142857143em;
      .inner{ padding: 60px; .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-weight: 600; font-size: .875em; 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; }
  }
}

/* High Density */
@highDensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 1.5)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)";

@media @highDensity{
  .mobile header .mobile_btn .icon,.mobile .mobile_btn.selected .icon{ background: url('/images/structure/mobile_sprite@2x.png'); background-size: 150px 70px; }
}