/* Located at the bottom */
.menu {
  bottom: 1.5em;
  right: 1.5em;
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .menu-btn-container {
    position: relative;

    .hotkey {
      position: absolute;
      color: var(--bg-dark);
      background-color: var(--bg-active);
      border-radius: 10%;
      outline: 1px solid black;
      font-size: 0.8em;
      height: 1.15em;
      right: 0;
      bottom: 0;
      display: inline-flex;
      justify-content: center;
      text-transform: capitalize;
      transform: translate(25%, 45%);
      padding: 1px 2px;
    }
  }

  .menu-btn {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--bg-dark);
    color: wheat;
    width: 2em;
    height: 2em;
    cursor: pointer;
    border: unset;
    font-size: 1.1em;
    font-weight: bold;
    transition: 250ms all ease-out;

    svg {
      overflow: visible;
      width: 1em;
    }

    &.disabled {
      filter: brightness(0.5) blur(1px);
      cursor: default;
    }

    &.clickable:hover {
      transform: scale(1.08);
    }

    &.active {
      background-color: var(--primary);
    }

    &.kb-only {
      cursor: default;
    }

    &.arrows svg {
      width: 1em;
      transform: translate(10%, -2.5%) scaleX(-1);
    }

    &.swap svg {
      width: 1em;
    }

    &.pan svg {
      width: 0.85em;
    }
  }
}

header {
  display: flex;
  flex: 1 0 auto;
  justify-content: space-between;
  align-items: center;
  background-color: var(--blackish);
  padding: 1.2em;
  height: 74px;

  .nav-link {
    all: unset;
    gap: 0.25em;
    cursor: pointer;
    padding: 5px 7px;
    user-select: none;
    /* transition: all 200ms ease-in-out; */

    &.disabled {
      cursor: default;
      color: var(--disabled-fg);
      background-color: var(--disabled-bg);
      user-select: none;
      pointer-events: none;
      opacity: 0.7;
    }
  }

  .left {
    display: flex;
    gap: 1em;

    button {
      border-radius: 10px;
    }

    .nav-link {
      background: var(--primary);
      border-radius: 10px;
    }

    .mode-linking {
      color: var(--teal);
      font-size: 1.3em;
      font-style: italic;
    }

    .mode-editing {
      color: var(--bg);
      font-size: 1.3em;
      font-style: italic;
    }
  }

  .center {
    display: flex;
    align-items: center;
    gap: 0.25em;

    .nav-link {
      color: dimgray;
      flex: 1 0 auto;
      text-align: center;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      .mode-idx {
        font-weight: bold;
        color: var(--primary);
      }

      &.selected {
        color: var(--white);
        background: var(--primary);

        .mode-idx {
          /*font-weight: unset;*/
          color: var(--dark-gray);
        }
      }
    }
  }

  .right {
    display: flex;
    align-items: center;
    gap: 1em;
    cursor: pointer;

    .username {
      color: dimgray;
    }

    .profile-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1.2em;
      height: 1.2em;

      svg {
        width: 1em;
        height: 1em;
        color: var(--bg-active);
      }
    }
  }
}