@use '../../../theme/main' as *;

.navContainer {
  position: absolute;
  right: 2vw;
  top: 1vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: max(1vw, 16px);
  z-index: 10;

  .logo {
    width: max(3vw, 32px);
    opacity: 0.5;
    cursor: pointer;
  }

  .nav,
  .showNav {
    margin-top: 2vh;
    gap: 2vh;
    display: flex;
    flex-direction: column;

    .navItem {
      background-color: $bg-overlay;
      padding: 0.5vh 1vw;
      border-radius: 4px;
      color: $text-white;
    }
  }

  .actions {
    display: flex;
    gap: 8px;
    position: absolute;
    top: 0.5vw;
    right: 75px;
  }
}