@import "grid";
@import "buttons";

//@warn "lots of refactoring to do here";

@mixin header {
  .horizontal {
    display: table-cell;
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    @include clearfix;

    @include media($mobile-breakpoint) {
      float: none;
    }

    li {
      display: inline-block;
      margin-left: 0;
      margin-right: 0.35rem;
      vertical-align: bottom;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .collapsed-menu-toggle,
  .main-menu-toggle {
    display: none;
  }

  .main-menu-toggle {
    @include media($mobile-breakpoint) {
      background-color: $nypl-red;
      color: $nypl-white !important;
      display: block;
      font-size: 1.1rem;
      height: 2rem;
      margin: 0 -1rem;
      padding: 0 1rem 0.65rem 0;
      text-align: right;
      text-decoration: none;

      .nypl-icon {
        @include nypl-icon($nypl-white, $nypl-red, $width: 1.5em, $height: 1.5em);
        position: relative;
        top: 0.4375rem;
      }
    }
  }

  .logo {
    position: absolute;
    z-index: 1;
    @include clearfix;

    @include media($mobile-breakpoint) {
      float: none;
      margin: 1rem 0.5rem 1.5rem 0;
      position: relative;
      width: $logo-height;
    }
  }

  .nypl-logo {
    border: 0;
    display: block;
    font-size: 0;
    height: $logo-height;
    margin-top: 1rem;
    margin-bottom: 0.1rem;
    width: $logo-width;

    svg {
      height: $logo-height;
      width: $logo-width;
    }

    @include media($mobile-breakpoint) {
      margin: 0;
      margin-right: 0.5rem;
      overflow: hidden;
      width: $logo-height;

      .wordmark {
        display: none;
      }
    }
  }

  .content {
    position: relative;
    @include clearfix;

    @include media($mobile-breakpoint) {
      width: 100%;
    }
  }

  .service {
    background-color: $nypl-red;
    margin-bottom: 1rem;

    @include media($mobile-breakpoint) {
      display: table-footer-group;
    }
  }

  @include media($mobile-breakpoint) {
    display: table;
    width: 100%;
  }

  .nypl-full-width-wrapper {
    @include full-width-wrapper($in-header: true);
  }

  &.collapsed {
    border-bottom: 2px solid $nypl-light-gray; // absolute px because no control over page rem
    position: relative;

    &.collapsed .login-toggle {
      right: 110px; // absolute px because no control over page rem
      top: 9px; // absolute px because no control over page rem

      @include media($mobile-breakpoint) {
        font-size: 12px; // absolute px because no control over page rem
        top: -19px;

        div {
          right: -100%;
        }
      }
    }

    .main-menu-toggle {
      display: none;
    }

    .collapsed-menu-toggle {
      bottom: 0;
      color: $page-text-color;
      display: block;
      font-size: 12px; // absolute px because no control over page rem
      font-weight: bold;
      position: absolute;
      right: 1rem;
    }

    .logo {
      height: $collapsed-nav-height;
      overflow: hidden;
    }

    .nypl-logo {
      // background: url("../img/lion.svg") no-repeat scroll 0 0/#{$logo-height} auto $nypl-white;
      // background-position-y: -4px;
      margin: 0;
    }

    .service-buttons {
      min-height: $collapsed-service-height;

      li {
        display: none;
      }
    }

    .nav-buttons {
      font-size: 0;
      font-weight: bold;
      height: $collapsed-nav-height;
      margin-top: 0;

      li {
        box-shadow: none;
      }

      a {
        padding: 0.1rem 0.4rem;
      }

      .nypl-search {
        display: none;
      }
    }
  }


  .service-buttons {
    font-size: 0.8rem;
    padding: 0;

    @include media($mobile-breakpoint) {
      display: none;
      padding-top: 0.33rem;
      width: 100%;

      li {
        border-bottom: 1px solid $nypl-white;
        float: left;
        line-height: 2;
        margin: 0 0 0.33rem;
        width: 50%;
      }
    }

    li > a {
      @include service-button;

      &.donate {
        @include service-button($text-color: $nypl-red, $background-color: $nypl-white);
      }
    }

    button.collapsible {
      @include service-button($collapsible: true);
    }
  }

  .email-toggle {
    position: relative;

    button,
    svg {
      transition: all $hover-time;
    }

    button.active svg {
      transform: rotate(180deg);
    }

    .subscribe-button {
      @include basic-button($border-width: 0.0625rem, $border-color: $nypl-white);
    }

    form {
      background-color: $nypl-search-color-dark;
      color: $nypl-white;
      font-size: 1rem;
      min-width: 17rem;
      position: absolute;
      padding: 1rem;
      right: 0;
      text-transform: none;
      z-index: 1;

      @include media($mobile-breakpoint) {
        left: 0;
        right: auto;
      }
    }

    .email-toggle-title {
      font-size: 1.2rem;
      font-weight: bold;
      line-height: 1.5;
      margin: 0;
    }

    .links {
      margin: 1rem 0 0;
    }
  }

  .login-toggle { // should be renamed
    position: absolute;
    right: 0;
    top: 1.5rem;

    button {

      &.collapsible {
        @include login-button($collapsible: true);
      }
    }

    div {
      background-color: $nypl-search-color-dark;
      color: $nypl-white;
      font-size: 1rem;
      padding: 1rem;
      padding-bottom: 0;
      position: absolute;
      right: 0;
      text-transform: none;
      z-index: 1;
    }

    > a {
      @include login-button;
    }

    a.inverted {
      display: block;
      margin-bottom: 1rem;
      white-space: nowrap;
    }

    .welcome-message {
      display: inline-block;
      margin-right: 1rem;
      text-transform: none;
    }

    > a,
    button.collapsible {
      display: inline-block;

      &:link {
        text-decoration: none;
      }
    }

    @include media($mobile-breakpoint) {
      top: -3.3rem;

      .welcome-message {
        display: none;
      }
    }
  }

  .nav-buttons {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-top: calc(#{$logo-height} + 2rem);
    @include clearfix;

    @include media($intermediate-breakpoint) {
      font-size: 0.9rem;
    }

    @include media($mobile-breakpoint) {
      display: none;
      font-size: 1.2rem;
      margin-top: 1rem;

      li {
        border-bottom: 1px solid $nypl-light-gray;
        float: left;
        height: auto;
        line-height: 2;
        margin: 0 0 0.33rem;
        width: 50%;

        a {
          line-height: inherit;
        }
      }

      li.nypl-search {
        border: 0;
        font-size: 1rem;
        position: relative;
        right: initial;
        top: initial;
        width: 100%;
      }
    }

    a {
      border: 0;
      color: $page-color;
      display: block;
      line-height: 2.3;
      overflow: hidden;
      padding: 0.2rem 0.4rem;
      text-decoration: none;
      text-overflow: ellipsis;
      transition: all $hover-time;
      white-space: nowrap;

      &:hover {
        color: $nypl-red;
      }

    }

    li {
      box-shadow: inset 0 0 0 $nypl-red;
      transition: box-shadow 0.2s;
    }

    li:hover,
    li.active {
      box-shadow: inset 0 -4px 0 $nypl-red;
    }

  }


  li.nypl-search {
    @include media($intermediate-breakpoint) {
      // float: none;
      // position: absolute;
      // right: 0;
      // top: -3rem;
    }

    .nypl-search_main {
      background-color: $nypl-search-color;
      border-radius: ($general-border-radius * 2) ($general-border-radius * 2) 0 0;
      margin: 0;
      position: relative;
      @include transition(all, $hover-time, ease-out);

      .nypl-search_button {
        @include basic-button($font-size: inherit, $border-width: 0, $background-color: $link-color, $hover-background-color: $nypl-search-color-light, $height: 2rem, $padding-vertical: 0);
        margin-right: $form-padding;
      }

      &.display {
        display: block;
      }

      &.active {
        background-color: $nypl-search-color-dark;
      }

      .nypl-search_query-content {
        padding: $form-padding;
        position: relative;
      }

      .nypl-search_select {
        background-color: $nypl-search-color-dark;
        border-radius: 0 0 ($general-border-radius * 2) ($general-border-radius * 2);
        font-size: 0.9rem;
        right: 0;
        padding: 0 $form-padding $form-padding;
        position: absolute;
        top: 3rem; // because ¯\_(ツ)_/¯
        white-space: nowrap;
        z-index: 1;
      }

      .nypl-search_radio-label {
        @include simple-radiobutton;
        color: $nypl-search-color-light;
        display: inline-block;
        height: 2rem;
        line-height: 2;
        padding: 0.25rem 0.75rem 0 0.5rem;
        @include transition(all, $hover-time, ease-out);

        &.selected {
          background-color: $nypl-search-color-light;
          color: $page-text-color;
        }

        &.focus {
          box-shadow: inset 0 0 0 3px $focus-color;
        }

        input:focus {
          box-shadow: 0 0 0 3px $focus-color;
        }

      }

      input:focus {
        outline: none;
      }

      .nypl-form-text {
        @include input;
        // box-shadow: inset 0 0 0 2px $nypl-search-color-dark;
        border-radius: $general-border-radius;
        height: 2rem;
        margin-right: 0;
        padding: 0;
        text-indent: 0.5rem;
        transition: all $hover-time ease-out;
        width: 10rem;

        &.active {
          width: 16rem;
        }

        &:focus {
          background-color: $nypl-white;
          box-shadow: inset 0 0 0 0.25rem $focus-color;
          color: $nypl-search-color-dark;
          outline: none;
        }
      }

      @include media($mobile-breakpoint) {
        .nypl-form-text,
        .nypl-search_button,
        .nypl-search_radio-label {
          height: 2.5rem;
          line-height: 2.5;
        }

        .nypl-form-text,
        .nypl-form-text.active {
          margin: 0;
          width: 70%;
        }

        .nypl-search_button {
          margin: 0;
          width: 30%;
        }

        .nypl-search_select {
          top: 3.5rem;
        }
      }

    }

  }
}