// This style is enabled by nav.js.

$expandTransitionTime: .08s;
$expandTransitionFunc: ease-out;

body.with-expandable-nav {
  > header {
    will-change: background, opacity, box-shadow, height;
    transition:
      color $expandTransitionTime $expandTransitionFunc 0s,
      background $expandTransitionTime $expandTransitionFunc 0s,
      padding-bottom $expandTransitionTime $expandTransitionFunc 0s,
      box-shadow $expandTransitionTime $expandTransitionFunc 0s,
      height $expandTransitionTime $expandTransitionFunc 0s;

    position: relative;
    overflow: hidden;

    padding-bottom: 0;  // JS relies on this value

    .committee-widget {
      .widget-item {
        will-change: color, background, border;
        transition:
          color $expandTransitionTime $expandTransitionFunc 0s,
          background $expandTransitionTime $expandTransitionFunc 0s,
          border $expandTransitionTime $expandTransitionFunc 0s;
      }

      @media screen and (max-width: $bigscreenBreakpoint - 1) {
        .committee-name {
          display: none;
        }
      }

      .widget-group.committee-menu {
        display: none;
      }
    }
  }

  > main {
    will-change: transform;
    transition:
      transform $expandTransitionTime $expandTransitionFunc;
  }

  nav.expandable-nav {
    transition: none;
    opacity: 0;
    display: block;
    position: absolute;
    bottom: 20px;
    display: none;

    ul {
      padding: 0;
      margin: 0;
      list-style: none;

      li {
        padding: 0;
        margin-bottom: 1em;

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

        p.desc {
          margin: 0;
          font-size: 80%;
          opacity: .8;
        }

        @media screen and (min-width: $bigscreenBreakpoint) {
          margin-bottom: 0;
          margin-right: 1em;
          margin-left: 2px;
          max-width: 10em;
          padding-left: 1em;
          border-left: 1px solid white;
        }
      }

      @media screen and (min-width: $bigscreenBreakpoint) {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
      }
    }

    @media screen and (min-width: $bigscreenBreakpoint) {
      left: 15vw;
    }
  }

  button.nav-expand-trigger {
    border: none;
    background: none;
    color: white;

    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    height: 1.8em;
    width: $stripeWidth;
    display: flex;

    position: absolute;
    left: 0;
    top: .5em;

    @media screen and (min-width: $bigscreenBreakpoint) {
      top: 3.3em;
    }

    .fa-times { display: none; }
  }

  &.with-expanded-nav {
    > header {
      box-shadow: 0 5px 50px -20px rgba(black, 0.4);
      background: $isoTCColor;
      color: white;
      padding-bottom: 1.5em;
      z-index: 2;

      .parent-org-reference {
        .logo-link img {
          -webkit-filter: invert(1);
          filter: invert(1);
        }
      }

      nav.priority-nav {
        opacity: 0;
      }
      nav.expandable-nav {
        will-change: opacity;
        transition: opacity $expandTransitionTime $expandTransitionFunc;
        transition-delay: 0s;
        display: block;
        opacity: 1;
      }

      .committee-widget {
        .widget-item {
          background: none;
          box-shadow: none;
          border: 1px solid white;

          &.committee-id {
            background: white;
            color: $isoTCColor;
          }
          &.parent-org-reference {
            background: #e30b1f;
            border-color: white;
            color: white;
          }
        }
        .committee-name {
          display: inline;
          flex-basis: 100%;
        }
        .widget-group {
          flex-basis: 100%;
          @media screen and (min-width: $bigscreenBreakpoint) {
            flex-basis: unset;
          }
        }
        .widget-group.committee-menu {
          display: flex;

          .widget-item {
            background: rgba(black, 0.2);
            border-color: rgba(black, 0.2);
          }
        }
      }
    }
    button.nav-expand-trigger {
      .fa-times { display: inline-block; }
      .fa-bars { display: none; }
    }
  }
}