/* Copyright (c) 2020, the Dart project authors.  Please see the AUTHORS file
   for details. All rights reserved. Use of this source code is governed by a
   BSD-style license that can be found in the LICENSE file. */

/******************************************************
  site header
******************************************************/

@use 'variables';

/*
  The site logo should be hidden on mobile on the landing page (and only on that),
  because we are displaying another logo right under it.

  TODO: move this rule inside `a.logo` after the new design is finalized.
*/
.page-landing {
  .site-header a.logo {
    @media (max-width: variables.$device-mobile-max-width) {
      display: none;
    }
  }
}

.site-header {
  z-index: 100; // for animation of announcement
  background: var(--pub-site_header_banner-background-color);
  color: var(--pub-site_header_banner-text-color);
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0px 18px;
  font-size: 14px;
  position: relative;

  @media (max-width: variables.$device-mobile-max-width) {
    &:focus-within {

      .hamburger,
      .site-logo {
        opacity: 0.3;
      }
    }
  }

  @media (min-width: variables.$device-desktop-min-width) {
    height: 50px;
    padding: 0px 45px 0px 50px;
  }

  .site-header-space {
    flex-grow: 1;
  }

  .hamburger {
    display: block;
    background-color: transparent;
    width: 24px;
    height: 40px;
    background-position: center;
    margin-right: 18px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfjBB0KByvlnQBfAAAANklEQVRYw+3TsQkAMAgAQZP9dzZVwAESRLjrbBSLjwDot+qQ+Whp2bp/fzD/AChZyaBkJQNcB6AzBhZq14GdAAAAAElFTkSuQmCC');
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.8;

    @media (min-width: variables.$device-desktop-min-width) {
      display: none;
    }
  }

  button.-pub-theme-toggle {
    display: block;
    background-color: transparent;
    width: 24px;
    height: 24px;
    background-position: center;
    margin: 0 0 0 18px;
    background-image: url("../img/dark-mode-symbol-888888.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.8;

    .dark-theme & {
      background-image: url("../img/light-mode-symbol-888888.svg");
    }

    &:hover {
      opacity: 1.0;
    }
  }

  a.logo {
    display: inline-block;
    height: 30px;

    .site-logo {
      height: 30px;
      width: auto;
    }
  }

  .site-header-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--pub-full_page_mask-background-color);
    z-index: variables.$z-index-nav-mask;

    &.-show {
      display: block;
    }
  }

  .site-header-search {
    @media (max-width: variables.$device-mobile-max-width) {
      // Takes up most of the available space, but still leaves ample whitespace
      // between the input field and the site logo.
      flex-grow: 10;
      text-align: right;
    }

    .site-header-search-input {
      height: 25px;
      width: 25px;
      padding: 5px 20px 5px 5px;
      color: var(--pub-site_header_banner-text-color);
      background-color: var(--pub-site_header_banner-background-color);
      background-image: url("../img/search-icon-light.svg");
      background-repeat: no-repeat;
      background-position: right;
      background-size: 23px 23px;
      transition: width 0.4s ease-in-out, background-color 0.4s linear;

      border: none;
      border-radius: 5px;
      outline: none;
      cursor: pointer;

      &:focus {
        width: 240px;
        background-color: var(--pub-site_header_banner_hover-background-color);
        padding-left: 10px;
        padding-right: 30px;
        cursor: inherit;

        @media (max-width: variables.$device-tablet-max-width) {
          width: 120px;
        }

        @media (max-width: variables.$device-mobile-max-width) {
          width: 100%;
        }
      }
    }
  }

  .nav-main-button {
    padding: 8px 10px;
    margin-left: 10px;
    vertical-align: middle;
    background-color: transparent;
    color: inherit;
    font-size: 14px;
    height: 50px;
  }

  .nav-button {
    padding: 8px 10px 8px 0px;
    background-color: transparent;
    color: inherit;
    opacity: 1.0;

    &:hover {
      opacity: 0.8;
    }
  }

  .nav-link {
    color: var(--pub-site_header_popup-text-color);
    display: block;
    line-height: 26px;
    white-space: nowrap;
  }

  .nav-profile-img {
    display: block;
    width: 30px;
    margin: 10px;
    border-radius: 50%;
  }

  .nav-account-name {
    font-size: 14px;
  }

  .nav-account-email {
    font-size: 12px;
  }

  .nav-profile-img-mobile {
    display: none;
  }

  .nav-help-container-mobile {
    display: none;

    .foldable-icon {
      display: inline-block;
      position: relative;
      top: 3px;
      left: 16px;
      width: 14px;
      height: 14px;
      transform: rotate(90deg);
      transition: transform 0.3s linear;
    }

    &.foldable.-active {
      .foldable-icon {
        transform: rotate(180deg);
      }
    }
  }

  .site-header-nav {

    /* Navigation styles for mobile. */
    @media (max-width: variables.$device-mobile-max-width) {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      width: 80%;
      background: var(--pub-site_header_popup-background-color);
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: variables.$z-index-nav-mask + 1;
      opacity: 0; // see mobile_nav.dart
      overflow-y: auto;

      display: flex;
      flex-direction: column;

      &.-show {
        transform: translateX(0);
      }

      .nav-container,
      .nav-login-container {
        padding: 16px;
        border-bottom: 1px solid var(--pub-site_header_popup-border-color);

        .nav-main-button {
          display: none;
        }
      }

      .nav-profile-container {
        order: 1;

        .nav-profile-img {
          margin: 0 16px 0 0;
        }

        .nav-profile-image-desktop {
          display: none;
        }

        .nav-profile-img-mobile {
          display: block;
        }

        .nav-account-title-mobile {
          display: flex;
          align-items: center;
        }
      }

      .nav-login-container {
        order: 1;

        .nav-main-button {
          display: block;
          margin-left: 0px;
          height: auto;
          padding: 0px;
        }
      }

      .nav-my-container {
        order: 2;
      }

      .nav-help-container {
        display: none;
      }

      .nav-help-container-mobile {
        display: block;
        order: 3;
      }

      .nav-link {
        line-height: 46px;
        opacity: 0.7;
      }
    }

    /* Navigation styles for desktop. */
    @media (min-width: variables.$device-desktop-min-width) {
      display: flex;
      transform: none;

      .nav-container {
        position: relative;

        .nav-main-button {
          &:after {
            content: "";
            background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23757575'%3E %3Cpath d='M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z'/%3E %3Cpath d='M0-.75h24v24H0z' fill='none'/%3E %3C/svg%3E ");
            display: inline-block;
            width: 18px;
            height: 18px;
            vertical-align: middle;
            position: relative;
            top: -3px;
          }
        }

        &:hover .nav-hover-popup,
        &.hover .nav-hover-popup {
          display: block;
        }

        .nav-hover-popup {
          display: none;
          position: absolute;
          background: var(--pub-site_header_popup-background-color);
          color: var(--pub-site_header_popup-text-color);
          min-width: 200px;
          padding: 8px 12px;
          top: 50px;
          right: -20px;
          cursor: auto;
          cursor: initial;
          font-size: 14px;
          z-index: 2;
        }

        .nav-table-columns {
          display: flex;
        }

        .nav-table-column {
          padding: 12px;
          min-width: 100px;

          >h3 {
            border-bottom: 1px solid var(--pub-site_header_popup-border-color);
          }
        }

        .nav-separator {
          border-bottom: 1px solid var(--pub-site_header_popup-border-color);
          margin: 8px 0px;
        }
      }
    }
  }
}
