@import "../../../themes/default";

:global {
  .app-header {
    position: fixed;
    background-color: @header-background-color;
    width: 100%;
    top: 0;
    .header-transition();
    z-index: 111;
  }

  .app-header-visible {
    top: -60px;
    .header-visible-transition();
  }

  .app-nav {
    background-color: @navbar-background-color;
  }

  .app-nav-mobile {
    //.logo {
    //  .app-icon {
    //    width: 44px;
    //    height: 44px;
    //  }
    //}

    .app-menu {
      position: absolute;
      width: auto;
      margin-left: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      text-align: center;

      a {
        margin-right: 24px;
      }
    }

    .app-right {
      position: absolute;
      right: @padding-base;
      display: flex;
    }

    .app-instant-search {
      width: auto;
      margin-right: 0;
    }
  }

  .top-header {
    display: flex;
    height: 60px;
    line-height: 60px;

    .app-menu {
      white-space: nowrap;
      width: 50%;
      //overflow: hidden;
    }

    .app-menu-dots {
      display: inline-block;
      cursor: pointer;

      &:hover {
        .app-icon {
          background-color: @color-base;
        }
      }

      .app-dropdown-overlay {
        min-width: 180px;
        margin-left: -78px;

        li {
          padding: 0;
        }

        a {
          padding: 0 12px;
          line-height: 32px;
          height: 32px;

          &:after {
            display: none;
          }
        }

        a.active {
          color: @color-base;
        }
      }
    }
  }

  .app-brand, .app-list-media {
    display: flex;
  }

  .app-brand {
    .logo {
      line-height: 0;

      img {
        height: 56px;
      }
    }
  }

  .app-search {

  }

  .app-list-media {
    a {
      line-height: 0;
      margin: 0 3px;
    }

    .app-icon {
      margin-top: 2px;
    }

    img {
      height: 50px;
    }
  }

  .app-header-right {
    display: inline-flex;
    margin-left: auto;
  }

  .app-menu-account {
    display: inline-flex;
    white-space: nowrap;
    cursor: pointer;

    .active, &:hover {
      color: @color-base;
    }

    .app-icon {
      margin-left: 6px;
    }
  }

  .app-menu-mobile {
    margin-left: 8px;
    cursor: pointer;

    .app-dropdown-overlay {
      background-color: @menu-mobile-background-color;
      color: @menu-color;
      right: -@padding-base !important;
      border-radius: 0;
      padding: 0;
      min-width: 50vw;
      width: 100vw;

      &:after {
        display: none;
      }

      ul {
        li {
          padding: 0;
          text-align: right;
          width: 50%;
          float: right;

          &:last-child {
            a {
              border-bottom: 0;
            }
          }

          a {
            padding: 0 12px;
            line-height: 44px;
            height: 44px;
            color: @menu-color;
            border-bottom: 1px solid @menu-mobile-border-color;
            vertical-align: top;
          }

          a.active {
            color: @color-white;
            border-bottom: 1px solid @color-base;
          }

          .app-icon {
            margin-left: 6px;
            width: 28px;
            height: 28px
          }
        }
      }

      @media screen and (orientation: landscape) {
        ul {
          li {
            width: 25%;
          }
        }
      }
    }
  }

  .select-theme {
    display: inline-flex;
    margin-left: auto;
    cursor: pointer;
    padding: 10px 0;
    line-height: 22px;
  }

  .theme-box {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: #000;
    margin-right: 6px;
  }

  .theme-dark {
    .theme-box {
      background: #fff
    }

    .header {
      background-color: #232323;

      a {
        color: #ffffff;
      }
    }
  }
}