@import "../shared/styles/tl-encapsulated.scss";
@import "../shared/styles/tl-variables.scss";

:host {
  font-family: var(--tl-font-family-sans-serif);

  wvr-header-component {
    // Weaver Component overrides
    --wvr-navbar-padding: 0px;
    --wvr-font-family-sans-serif: var(--tl-font-family-sans-serif);
    --wvr-nav-link-font-size: var(--tl-nav-item-font-size);

    // Weaver Header Element Overrides
    --top-nav-height: 50px;
    --title-row-height: 85px;
    --bottom-nav-height: 65px;

    .title-row {
      background-color: var(--primary-default-bg);

      a span {
        color: var(--primary-default-color);
      }
    }

    .bottom-nav {
      background-color: var(--secondaryNeutral-default-bg);
    }

    wvr-nav-list-component[top-navigation-mobile]
      > [role=menu]
      > wvr-nav-li-component
      > [role=menuitem]
      > a,
    wvr-nav-list-component[top-navigation]
      > [role=menu]
      > wvr-nav-li-component
      > [role=menuitem]
      > a {
      padding: 12px;
      color: var(--tl-white);
    }

    wvr-nav-list-component[top-navigation-mobile]
      > [role=menu]
      > wvr-nav-li-component
      > [role=menuitem]
      > a:focus-within,
    wvr-nav-list-component[top-navigation]
      > [role=menu]
      > wvr-nav-li-component
      > [role=menuitem]
      > a:focus-within,
    wvr-nav-list-component[top-navigation-mobile]
      > [role=menu]
      > wvr-nav-li-component
      > [role=menuitem]
      > a:hover,
    wvr-nav-list-component[top-navigation]
      > [role=menu]
      > wvr-nav-li-component
      > [role=menuitem]
      > a:hover {
      color: var(--tl-black);
    }

    // Weaver Nav List overrides for top navigation
    wvr-nav-list-component[top-navigation-mobile] wvr-nav-li-component,
    wvr-nav-list-component[top-navigation] wvr-nav-li-component,
    wvr-nav-list-component[top-navigation] .dropdown,
    wvr-nav-list-component[top-navigation-mobile] .dropdown {
      --wvr-nav-link-background-hover: var(--tl-deep-yellow);
      --wvr-nav-li-width: contain;
      border-right: 1px solid var(--secondary-default-box-shadow-color);
      font-size: 14px;

      .wvr-button {
        color: var(--tl-white);
        padding: 9px 12px;
        text-align: center;
        font-size: 14px;
        margin-top: 4px;
      }

      .wvr-button:focus {
        border-radius: 0px;
        box-shadow: none;
      }

      > .dropdown-menu {
        width: 497px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        text-align: left;
        font-size: 16px;
      }

      .libraries {

        .libraries-link {
          margin-bottom: 18px;
          a {
            color: var(--primary);
            text-decoration: underline;
          }
        }

        p {
          color: var(--primaryNeutral);
          a {
            color: #2b5d7d;
            wvr-text-component {
              text-decoration: underline;
            }
          }
        }
      }

      .information-for {
        wvre-dropdown-menu-item {
          display: block;
        }

        a {
          color: var(--secondary-default-hover-bg);
          line-height: 2;
          padding: 10px 20px;
        }

        a:focus-within,
        a:hover {
          color: var(--secondary-default-bg);
        }
      }

      .help {
        .wvr-button {
          color: var(--tl-white);
        }

        .wvr-button:focus-within,
        .wvr-button:hover {
          color: var(--tl-black);
        }

        wvre-dropdown-menu-item {
          border-bottom: 1px solid var(--light);
          padding: 10px 0px;
          display: flex;

          a {
            padding: 8px 0px 8px 8px;
            width: 100%;
            color: rgb(0, 100, 139);
            &:hover {
              color: rgb(0, 63, 88);
            }
          }

          tl-icon-component svg {
            fill: var(--dark);
            width: 35px;
            height: 35px;
            margin-right: 5px;
            background: var(--light);
          }
        }

        wvre-dropdown-menu-item:focus-within > .helpLink,
        wvre-dropdown-menu-item:hover > .helpLink {
          background: var(--secondaryNeutral);
          border-radius: 5px;
        }

        wvre-dropdown-menu-item:first-child,
        wvre-dropdown-menu-item:last-child {
          border-bottom: 0px;
        }
      }

    }

    wvr-nav-list-component[bottom-navigation]
    wvr-nav-li-component.call-to-action {
      --wvr-nav-link-background-hover: var(--secondary);
      width: fit-content;
      font-family: var(--tl-font-family-sans-serif);
      font-weight: 600;
      font-size: 16px;
      a {
        display: flex;
        align-items: center;
        margin: 0 20px;
        color: var(--secondary);
        text-decoration: none;
        tl-icon-component svg {
          fill: var(--secondary);
          width: 24px;
          height: 65px;
          margin-right: 5px;
        }
      }
    }

    wvr-nav-list-component[bottom-navigation]
    wvr-nav-li-component.call-to-action:focus-within,
    wvr-nav-li-component.call-to-action:hover {
      a {
        color: var(--tl-white) !important;
        tl-icon-component svg {
          fill: var(--tl-white) !important;
        }
      }
    }

    wvr-nav-list-component[top-navigation] .dropdown:focus-within,
    wvr-nav-list-component[top-navigation] .dropdown:hover {
      .wvr-button {
        color: var(--tl-black);
      }
    }

    wvr-nav-list-component[top-navigation] wvr-nav-li-component:last-child,
    wvr-nav-list-component[top-navigation] .dropdown:last-child {
      border: none;
    }

    wvr-nav-list-component[bottom-navigation] wvre-nav-li,
    wvr-nav-list-component[bottom-navigation] wvr-nav-li-component {
      --wvr-nav-link-color: var(--tl-black);
      --wvr-nav-link-color-hover: var(--tl-white);
      --wvr-nav-link-background-hover: var(--dark);
      width: fit-content;

      .nav-item > a wvre-text {
        font-family: var(--tl-font-family-sans-serif);
        font-weight: 700;
        font-size: 16px;
        color: var(--tl-black);
      }

      .nav-item > a.nav-link {
        display: flex;
        align-items: center;
      }

      .nav-item:focus-within > a wvre-text,
      .nav-item:hover > a wvre-text {
        color: var(--tl-white);
      }

      :focus-within,
      :hover {
        span[button-content],
        svg {
          color: var(--tl-white);
        }
      }

      tl-dropdown-menu,
      tl-mega-menu {
        display: flex;
        height: 100%;
        width: 100%;

        wvr-dropdown-component {
          display: flex;
          height: 100%;
          width: 100%;

          .wvr-dropdown {
            width: 100%;
            .dropdown {
              height: 100%;
              width: 100%;

              wvre-text {
                font-size: var(--tl-font-size);
              }

              wvr-button-component {
                margin-top: 1px;
                display: flex;
                height: 100%;
                width: 100%;

                button-wrapper {
                  width: 100%;

                  button {
                    height: 100%;
                    width: 100%;
                    text-align: center;
                  }
                }
              }
            }
          }
        }
      }
    }

    .navbar-brand {
      font-size: var(--tl-default-font-size);
    }

    .h1 {
      font-size: var(--tl-h1-font-size);
    }

    .top-nav {
      border-bottom: 1px solid var(--primaryNeutral);
      background: var(--primaryAccent-default-bg);

      .navbar-brand wvre-text-node {
        color: var(--primaryAccent-default-color);
      }

      .container {
        > div {
          height: auto;
        }
      }
    }

    @media (max-width: 992px) {
      --top-nav-height: auto;
      --wvr-nav-li-width: fit-content;
      header {
        box-shadow: 1px 1px 5px 2px var(--tl-black);
      }

      [top-navigation],
      [bottom-navigation],
      .bottom-nav {
        display: none;
        overflow: hidden;
      }

      .top-nav {
        border-bottom: 1px solid var(--primaryNeutral);

        .container {
          > div {
            width: 100%;
          }

          > a.navbar-brand {
            margin: auto;
          }
        }
      }

      .mobile-menu > div > div > wvr-nav-list-component > wvre-nav-li > [role=menuitem] > a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 65px;
        width: 100%;
        color: var(--tl-black);
        background: var(--tl-deep-yellow);
        border-bottom: 1px solid var(--secondaryNeutral);

        wvre-text {
          font-family: var(--tl-font-family-sans-serif);
          font-weight: 600;
          font-size: 16px;
          color: var(--tl-black);
        }
      }

      wvr-nav-list-component[top-navigation-mobile] {
        .dropdown,
        wvr-nav-li-component,
        wvre-nav-li {
          flex: 1 1 auto;
          border-right: none;
        }

        [role=menu] {
          justify-content: space-evenly;
          flex-wrap: nowrap !important;
          flex-direction: column !important;
        }

        [role=menuitem] {
          justify-content: left !important;

          wvr-dropdown-component,
          wvre-dropdown {
            width: 100%;
          }

          .wvr-dropdown {
            display: flex !important;
          }

          wvr-button-component {
            display: flex;
            width: 100%;

            button-wrapper {
              width: 100%;
              .btn {
                text-align: start !important;
              }
            }
          }

          .dropdown .wvr-button,
          a {
            width: 100%;
            padding-top: 6px !important;
            padding-bottom: 6px !important;
            margin-top: 0px !important;

            div[dropdown-button],
            wvr-text-component,
            wvre-text {
              font-family: var(--tl-font-family-sans-serif);
              font-weight: bold;
              font-size: 16px;
              color: var(--tl-black);
            }
          }
        }
      }

      .title-row {
        text-align: center;
      }

      tl-dropdown-menu,
      tl-mega-menu {
        width: 100%;
        color: var(--tl-black);
        background: var(--tl-deep-yellow);
        overflow: hidden;
        border-bottom: var(--secondaryNeutral);

        wvr-dropdown-component {
          display: flex;
          width: 100%;

          .wvr-dropdown {
            display: flex !important;
            width: 100%;

            .dropdown {
              display: flex !important;
              width: 100%;

              wvr-button-component {
                display: flex;
                width: 100%;

                button-wrapper {
                  display: flex;
                  width: 100%;
                  height: 68px;
                  align-items: center;
                  border-bottom: thin solid var(--secondaryNeutral);

                  button {
                    display: flex;
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }

      .mobile-menu-button {
        display: inline-block;
        overflow: hidden;
      }

      .mobile-menu {
        display: inline-block;
      }

      .mobile-menu.closed {
        width: 0px;
        opacity: 0;
        overflow: hidden;
      }
    }
  }

  .mobile-menu-button {
    display: none;
    margin-left: 10px;
    margin-top: 10px;
    cursor: pointer;
  }

  .mobile-menu {
    position: absolute;
    display: none;
    background: var(--secondaryNeutral);
    width: 75%;
    opacity: 1;
    box-shadow: 3px 3px 10px 0px var(--tl-black);
    left: 0;
    z-index: 1100;
    transition: width 0.5s ease-in-out, opacity 0.5s ease-in-out;

    div.mobile-menu-content {
      wvre-nav-li > [role=menuitem].nav-item {
        a {
          white-space: nowrap;
        }

        .mobile-display tl-dropdown-menu-section-component,
        .mobile-display tl-dropdown-menu-section
        .mobile-display tl-mega-menu-section-component,
        .mobile-display tl-mega-menu-section {
          white-space: nowrap;
        }

        tl-dropdown-menu
          > wvr-dropdown-component
          > .wvr-dropdown
          .dropdown
          wvr-button-component,
        tl-mega-menu
          > wvr-dropdown-component
          > .wvr-dropdown
          .dropdown
          wvr-button-component {

          white-space: nowrap;

          span[button-content] {
            width: 100%;
            span {
              display: block;
            }
          }
        }
      }

      wvr-nav-li-component.call-to-action {
        a {
          color: var(--tl-black);
          white-space: nowrap;
          justify-content: start !important;
          padding: 23px 16px;
          height: 65px;
          width: 100%;
          background: var(--tl-deep-yellow);
          border-bottom: 1px solid var(--secondaryNeutral);
          text-decoration: none;
          font-weight: 700;
        }

        tl-icon-component svg {
          display: none;
        }
      }
    }
  }
}