@import "woople-theme/variables.css.less";
@import "woople-theme/colours.css.less";

.mobile-search {
  display: none;
  left: 0.5em;
  right: 0.5em;
  position: absolute;
  margin-top: 25px;

  input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    .border-radius(28px);
    height: 38px;
    margin-bottom: 20px;
    width: 100%;
  }
}

.profile {
  position:absolute;
  top:19px;
  right:30px;
  width:300px;

  .profile-link {
    float:right;
    margin-bottom:0;

    .dropdown-menu {
      background: @contentBackground;
      .border-radius(0);
      .box-shadow(@default-shadow);
      top:33px;
      border:none;
      left:auto;
      right:2px;

      li > a:hover, .active > a, .active a:hover {
        background-color:@primary;
      }

      .divider:last-child {
        display:none;
      }
    }

    .dropdown-toggle {
      height:28px;
      width:28px;
      padding:2px;
      position:relative;
      z-index:1001;
      border:none;

      &:hover {
        img {
          .box-shadow(none);
        }
      }
    }

    .open .dropdown-toggle {
      background: @contentBackground;
      border-color:@contentBorder;
      border-bottom:none;
      border-bottom-left-radius:0;
      border-bottom-right-radius:0;

      img {
        .box-shadow(none);
      }
    }

    img {
      max-width:28px;
      .border-radius(5px);
      .box-shadow(0 1px 3px rgba(0,0,0,0.10));
    }
  }

  .search {
    float:left;
    display:inline-block;
    position:relative;
    margin-bottom:0;
    margin-top:3px;
    margin-right:5px;

    .search-page {
      position:absolute;
      left:10px;
      top:6px;
      opacity:0.5;

      .icon-search {
        background:url(/assets/woople-theme/icons/search.png);
        background-position:0 0;
      }
    }

    .search-query {
      padding-left:30px;
    }
  }
}
@media (min-width: 769px) {
  #masthead.mobile-search-visible {
    height: 24px;
  }

  .container .menu.mobile-search-visible {
    top: 120px;
  }

  .mobile-search {
    display: none;
    overflow: hidden;
    height: 0;
    
    input {
      display: none;
    }
  }
}
@media (max-width: 768px) {
  #masthead.mobile-search-visible {
    height: 72px;
  }

  .container .menu.mobile-search-visible {
    top: 120px;
  }

  .profile {
    right:5px;
    width:auto;

    .search {
      margin-right:0;

      input { display:none; }

      .search-page {
        opacity:1.0;
        position:relative;
        display:inline-block;
        width:30px;
        height:30px;
        top:0;
        left:0;
        margin-right:5px;

        .icon-search {
          position:absolute;
          left:8px;
          top:8px;
        }
      }
    }
  }
}