.root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  width: var(--folders-sidebar-width);
  height: 100%;

  background-color: var(--color-background-sidebar);

  :global {
    .Menu .bubble {
      --offset-y: 3.5rem;
      --offset-x: 1rem;

      overflow-y: auto;
      max-height: calc(100 * var(--vh) - 3.5rem);
    }
    .MenuItem .Toggle {
      margin-inline-start: auto;
    }

    .MenuItem.compact .Toggle {
      transform: scale(0.75);
      margin-inline-end: -0.125rem;
    }

    .MenuItem.compact .Switcher {
      transform: scale(0.75);
    }
    .account-menu-item {
      --custom-emoji-size: 1rem;

      &-test {
        position: absolute;
        z-index: 1;
        bottom: 0.0625rem;
        left: 2.875rem;

        font-size: 0.5rem;
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
      }

      .account-avatar {
        margin-inline: 0.375rem 1.125rem;
      }

      .fullName {
        margin: 0;
        padding-top: 0.1875rem;
        font-size: 1em;
        line-height: 1;
      }
    }
  }
}

.tabs {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  padding-inline: 0;

  font-size: 0.625rem;
  line-height: 0.75rem;

  background-color: var(--color-background-sidebar);
}

.icon {
  font-size: 1.5rem;
  color: var(--color-text-secondary);
}

.menuButton {
  width: var(--folders-sidebar-width);
  height: 3.5rem;
  border-radius: 0;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-interactive-buffered);
}

.hideMenuButton {
  visibility: hidden;
}
