@import "chembl_base";

/* -------- VARIABLES -------- */

//header
$chembl-header-height: 54px;
$chembl-header-height-pintop: 140px;
$chembl-header-padding: 10px;
$side-buttons-width-big: 180px;
$row-height-xl: 40px;
$logo-height-xl: 50px;

//search bar
$search-bar-height: 25px;
$search-bar-height-wider: 30px;
$search-bar-font-size-small: 0.8em;
$search-bar-font-size-big: 1em;
$search-bar-max-width: 600px;
$search-bar-max-width-xl: 1000px;

/* -------- DEFAULT STYLES PINNED HEADER -------- */

.disable-scroll {
  overflow-y: hidden;
}

header .row {
  margin-bottom: 0;
}

.draw-structure:hover {
  background-color: $lighter-teal;
}

.header-button:hover {
  background-color: $lighter-teal;
}

.header-nav-links {
  li:hover {
    background-color: $lighter-teal;
  }
}

.burger-dropdown {
  .dropdown-item:hover {
    a {
      color: $chembl-teal !important;
    }
  }
}

#chembl-header-container {
  height: 0;
  width: 100%;
  z-index: $z-underlay;

  .chembl-header {
    height: $chembl-header-height;
    background-color: $chembl-teal;
    width: 100%;
    position: relative;
    float: left;

    -webkit-transition: all 200ms ease-in;
    transition: all 200ms ease-in;

    .inner-row {
      display: flex;
      justify-content: space-between;
      margin-left: auto;
      margin-right: auto;

      -webkit-transition: all 200ms ease-in;
      transition: all 200ms ease-in;

      .burger-button, .chembl-logo {
        height: $chembl-header-height;
        padding: $chembl-header-padding;
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        -webkit-transition: background-color 200ms ease-in-out;
        transition: background-color 200ms ease-in-out;
      }

      .chembl-logo {
        img {
          width: 35px;
          height: auto;
        }

        span {
          padding-left: $chembl-header-padding;
          padding-top: $chembl-header-padding;
          font-family: $chembl-helvetica;
          font-size: 35px;
        }

        /* -------- SMALL SCREEN -------- */
        @media (max-width: 600px) {
          span {
            font-size: 30px;
          }
        }

      }

      /* -------- SEARCH BAR -------- */
      .search-bar {
        height: $chembl-header-height;
        padding: $chembl-header-padding;
        float: left;
        background: none;
        flex-grow: 2;
        display: flex;
        align-items: center;

        -webkit-transition: max-width 300ms ease-in;
        transition: max-width 300ms ease-in;

        .search-bar-container {
          width: 100%;
          position: relative;

          .bar-wrapper {
            width: 100%;
            background-color: white;
            display: flex;

            -webkit-transition: height 200ms ease-in;
            transition: height 200ms ease-in;

            .chembl-search-bar {
              font-family: $helvetica;
              padding-left: $chembl-header-padding;
              margin: 0;
              height: 100%;
            }

            .special-searches-buttons-container{
              display: flex;
              padding: 0 5px;
              background-color: $chembl-teal;

              .bar-button:first-child{
                margin-right: 5px;
              }
            }

            .bar-button {
              padding: $chembl-header-padding;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;

              -webkit-transition: background-color 200ms ease-in-out;
              transition: background-color 200ms ease-in-out;

              img {
                height: auto;
                -webkit-transition: height, width 200ms ease-in;
                transition: height, width 200ms ease-in;
              }

              background-color: $darker-teal;
              &:hover{
                background-color: $lighter-teal
              }

            }
          }

          .search-examples, .special-searches {
            font-family: $chembl-helvetica;
            color: white;
            font-size: 0.8em;
            margin-top: 0.5em;
            letter-spacing: 0.05em;
            width: 50%;

            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            a {
              color: white;

              &:hover {
                text-decoration: underline;
              }
            }

          }

          .search-examples{
            float: left;
            display: flex;

            a:last-child{
              display:inline-block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .special-searches{
            float: right;
            text-align: right;
          }
        }
      }
    }
  }
}

/* -------- SMALL DEVICES <748px -------- */
@media (max-width: 748px) {

  .bar-wrapper {
    height: $search-bar-height;

    .chembl-search-bar {
      font-size: $search-bar-font-size-small;
    }

    .bar-button {

      img {
        width: 15px;
      }
    }
  }

  .burger-button {

    img {
      width: 30px;
      height: 30px;
    }
  }
}

/* -------- SMALL BREAKPOINT SM >748px -------- */
@media (min-width: 749px) {

  .bar-wrapper {
    height: $search-bar-height-wider;

    .header-button {
      width: $chembl-header-height;
    }

    .chembl-search-bar {
      font-size: $search-bar-font-size-big;
    }

    .bar-button {

      img {
        width: 22px;
      }
    }
  }

  .burger-button {

    img {
      margin-right: $chembl-header-padding;
      margin-left: $chembl-header-padding;
      width: 35px;
      height: 35px;
    }
  }
}

/* -------- BREAKPOINT L > 992px -------- */
@media (min-width: 992px) {

  .search-button {
    width: 100px;
  }
}

/* -------- BREAKPOINT XL > 1300px -------- */
@media (max-width: 1300px) {

  .search-bar {
    max-width: $search-bar-max-width;
  }

}

@media (min-width: 1300px) {

  .search-bar {
    max-width: $search-bar-max-width-xl;
  }
}

/* -------- UNPINNED HEADER > 992px -------- */
@media (max-width: 992px) {
  .chembl-header-spacer {
    height: 54px;
    pointer-events: none
  }
}

@media (min-width: 992px) {
  .chembl-header-spacer {
    height: 140px;
    pointer-events: none
  }

  #chembl-header-container.pin-top {

    .chembl-header {
      height: $chembl-header-height-pintop;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .inner-row {
        width: 95%;
        height: $row-height-xl;
        max-width: 1548px;
        padding-top: 20px;

        .chembl-logo {
          padding-left: 20px;

          img {
            width: $logo-height-xl;
            height: auto;
          }

          span {
            padding-left: $chembl-header-padding * 2;
            padding-top: $chembl-header-padding + 5;
            font-family: $chembl-helvetica;
            font-size: $logo-height-xl;
          }
        }

        &.nav-links-wrapper {
          padding-top: $chembl-header-padding;

          .header-nav-links {
            margin-top: 0;
            margin-bottom: 0;
            display: flex;

            li.nav-link {
              border-right: solid white 1px;
              font-size: 0.8em;
              font-family: $verdana;
              letter-spacing: 0.1em;

              &.save-page {
                border-right: none;
              }

              -webkit-transition: background-color 400ms ease-in-out;
              transition: background-color 400ms ease-in-out;

              a {
                display: block;
                width: 100%;
                height: 100%;

                color: white;
                padding: 5px 20px;
              }
            }
          }
        }
        .search-bar {
          max-width: 50%;

          .search-button {
            width: 100px;
          }
        }
      }

    }
  }
}

/* -------- DROPDOWN MENU (MORE) -------- */

.dropdown {
  position: relative;

  .dropdown-contents {
    background-color: $chembl-teal;
    z-index: $z-underlay;
    min-width: 200px;
    position: absolute;
    transform: translateY(-120%);
    -webkit-transform: translateY(-120%);
    top: 30px;
    left: 0;

    transition: transform 600ms ease-in-out;
    transition: -webkit-transform 600ms ease-in-out;
    -webkit-transition: transform 700ms ease-in-out;
    -webkit-transition: -webkit-transform 700ms ease-in-out;

    li.dropdown-item {
      border-bottom: $lighter-teal solid 1px;
      border-right: none;
      height: 40px;

      -webkit-transition: background-color 400ms ease-in-out;
      transition: background-color 400ms ease-in-out;

      a {
        display: block;
        width: 100%;
        height: 100%;
        padding: 11px 20px !important;

      }
    }

    li:first-child {
      border-top: $lighter-teal solid 1px;
    }

    li:last-child {
      border: none;
    }
  }

  /* -------- BURGER DROPDOWN MENU  -------- */
  &.burger-dropdown {

    .dropdown-contents {
      position: fixed;
      left: 0;
      width: 100%;
      margin-top: 15px;
      //Reduce the max height a bit less than the 'fitting size' to avoid issues with overflowing the viewport height
      max-height: calc(100vh - #{$chembl-header-height} - 40px);
      overflow-y: scroll;
      background-color: white;
      box-shadow: 0 1px 4px 0 #e4e4e4;


      transition: transform 600ms ease-in-out;
      transition: -webkit-transform 600ms ease-in-out;
      -webkit-transition: transform 700ms ease-in-out;
      -webkit-transition: -webkit-transform 700ms ease-in-out;

      .dropdown-item {
        height: 50px;
        border-bottom: solid 0.5px #e4e4e4;

        a {
          display: block;
          color: $grey-medium;
          font-size: 0.9em;
          padding: 15px !important;
          text-align: center;

          transition: color 200ms ease-in-out;
          -webkit-transition: color 200ms ease-in-out;
        }
      }
    }
  }
}

/* -------- TOGGLE DROPDOWNS  -------- */
.dropdown:hover {

  .dropdown-contents.more-section {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}

.burger-button.active {
  background-color: $lighter-teal;
}

.burger-dropdown.active {
  background-color: $lighter-teal;
}

.burger-dropdown-contents.active {
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

/* -------- FIX DROPDOWN TOP IN DIFFERENT SIZES  -------- */
#chembl-header-container.pinned {

  .burger-dropdown {

    .dropdown-contents {
      top: 39px;
    }

  }

  .show-on-large-pin-top{
    display: none;
  }

}

@media (min-width: 992px) {

  #chembl-header-container.pin-top {

    .hide-on-large-pin-top{
      display: none !important;
    }

  }

}

@media (min-width: 640px) and (max-width: 992px) {

  #chembl-header-container.pin-top {

    .burger-dropdown {

      .dropdown-contents {
        top: 69px;
      }

    }
  }

  #chembl-header-container{
    .show-on-large-pin-top {
      display: none !important;
    }
  }
}

@media (max-width: 640px) {

  #chembl-header-container.pin-top {

    .burger-dropdown {

      .dropdown-contents {
        top: 84px;
      }
    }
  }

  #chembl-header-container{
    .show-on-large-pin-top {
      display: none !important;
    }
  }
}

/* -------- MAINTENANCE ANNOUNCEMENT  -------- */
.maintenance-announcement{
  padding: 10px 40px;
  background-color: $red-6;
}