.nav-wrapper {
  display: none;

  @include bp("tablet") {
    display: block;
  }
}

.navigation {
  display: flex;
  align-items: center;
  list-style-type: none;
  gap: 1rem;
  font-family: var(--font-atyp-text);
  font-size: 1rem;
  color: var(--v2-color-navy);

  @include bp("desktop") {
    gap: 1.625rem;
  }

  &.navy {
    color: var(--v2-color-cyan);

    .menuItem,
    .menuItem a {
      text-decoration: none;
      .dot {
        border-color: var(--v2-color-cyan);
      }

      &:hover,
      &.active {
        .dot {
          background-color: var(--v2-color-cyan);
        }
      }
    }

    .submenu {
      background-color: var(--v2-color-white);
      color: var(--v2-color-black);

      .submenuItem a {
        .newTab {
          color: var(--v2-color-dark-gray);
        }

        &.iconItem {
          background-color: var(--v2-color-cyan);

          img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
  }

  &.tangerine {
    color: var(--v2-color-black);

    .menuItem,
    .menuItem a {
      .dot {
        border-color: var(--v2-color-black);
      }

      &:hover {
        .dot {
          background-color: var(--v2-color-black);
        }
      }
    }

    .submenu {
      background-color: var(--v2-color-white);
      color: var(--v2-color-black);

      .submenuItem a {
        .newTab {
          fill: var(--v2-color-black);
        }

        &.iconItem {
          background-color: var(--v2-color-cyan);
        }
      }
    }
  }

  &.cyan {
    color: var(--v2-color-navy);

    .menuItem,
    .menuItem a {
      .dot {
        border-color: var(--v2-color-navy);
      }

      &:hover {
        .dot {
          background-color: var(--v2-color-navy);
        }
      }
    }

    .submenu {
      background-color: var(--v2-color-white);
      color: var(--v2-color-black);

      .submenuItem a {
        .newTab {
          fill: var(--v2-color-black);
        }

        &.iconItem {
          background-color: var(--v2-color-cyan);
        }
      }
    }
  }

  &.indigo {
    color: var(--v2-color-white);

    .menuItem,
    .menuItem a {
      .dot {
        border-color: var(--v2-color-white);
      }

      &:hover {
        .dot {
          background-color: var(--v2-color-white);
        }
      }
    }

    .submenu {
      background-color: var(--v2-color-white);
      color: var(--v2-color-black);

      .submenuItem a {
        .newTab {
          fill: var(--v2-color-black);
        }

        &.iconItem {
          background-color: var(--v2-color-cyan);
        }
      }
    }
  }

  li {
    position: relative;
    line-height: 1;

    &:last-child {
      .submenu {
        left: unset;
        right: 0;
      }
    }
  }

  .menuItem,
  .menuItem a {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    height: 2.3rem;

    .dot {
      display: inline-block;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      border: 0.0625rem solid var(--v2-color-navy);
      transition: background-color 0.2s ease;
    }

    &:hover {
      .dot {
        background-color: var(--v2-color-navy);
      }
    }
  }

  .menuItem.show {
    .submenu {
      visibility: visible;
    }
  }

  .submenu {
    visibility: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(calc(100% + 0.75rem));
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem;
    background-color: var(--v2-color-indigo);
    width: max-content;
    border-radius: 0.3125rem;
    color: var(--v2-color-white);

    .right {
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
    }

    .submenuItem a {
      display: flex;
      align-items: center;
      gap: 0.375rem;

      .newTab {
        width: 0.5rem;
        height: 0.5rem;
      }

      &.iconItem {
        width: 1.75rem;
        height: 1.75rem;
        padding: 0.375rem;
        background-color: var(--v2-color-cyan);
        object-fit: contain;
        display: flex;
        align-items: center;
        justify-content: center;
      }

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

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0.75rem;
      transform: translateY(-100%);
    }
  }
}

.connect {
  height: 2.5rem;
  display: flex;
  align-items: center;
}
