aside {
  --transition-speed: 250ms;
  --transition-function: ease-in-out;
  --text-color: #b5b5b5;
  --text-hover-color: white;
  --hover-bg: rgba(255 255 255 / 0.17);
  --divider-color: #383838;
  --z-index: 1000;
  --icon-size: 21px;
  --icon-size-lg: 30px;
  --transition: all var(--transition-speed) var(--transition-function);
  --scrollbar-color: #575757;
  --sidebar-width: 260px;
  --indent: 1rem;
  z-index: var(--z-index);
  width: max-content;
  max-width: var(--sidebar-width);
  grid-area: aside;
  height: 100vh;
  max-height: 100vh;
  transition: var(--transition);

  nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-inline: 0.5rem;
    background-color: var(--sidebar-bg);
    color: var(--text-color);
    box-shadow: 5px 0 5px -1px rgb(0 0 0 / 20%), 3px 0 6px 0 rgb(0 0 0 / 14%),
      3px 0 7px 0 rgb(0 0 0 / 12%);
    width: max-content;
    max-width: var(--sidebar-width);
    height: 100%;
    overflow-y: auto;
    transition: min-width var(--transition-speed) var(--transition-function);
    scrollbar-color: var(--scrollbar-color) var(--sidebar-bg);
    scrollbar-width: thin;

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background-color: var(--scrollbar-color);
    }

    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-color);
      border-radius: 5px;
    }

    .list-item {
      position: relative;
      padding-inline: 0.5rem;
      color: var(--text-color);
      background-color: transparent;
      box-shadow: none;
      border: none;
      display: flex;
      align-items: center;
      padding: 0.5rem;
      border-radius: 4px;
      width: 100%;

      &:where(:hover, .active):not(:where(.profile, .brand)) {
        color: var(--text-hover-color);
        background-color: var(--hover-bg);
      }

      .icon {
        width: 30px;
        min-width: 30px;
        height: var(--icon-size);
        font-size: var(--icon-size);
        justify-self: center;
        text-align: center;

        svg,
        img {
          width: var(--icon-size);
          height: var(--icon-size);
          vertical-align: top;
        }
      }

      .content {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.25rem;
        white-space: nowrap;
        padding-inline-start: 0.5rem;
        transition: all var(--transition-speed) var(--transition-function);
        overflow: hidden;
        max-width: calc(var(--sidebar-width) - 1.8rem);

        > span {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      &.brand {
        top: 0;
        z-index: 1;
        padding-top: 1rem;
      }
    }

    button.list-item {
      border: none;
      cursor: pointer;
    }

    hr {
      background-color: var(--divider-color);
      border-color: transparent;
      border-width: 1px 0 0;
      height: 1px;
      margin: 0.5rem;
    }

    .shortcut {
      .content > span {
        text-overflow: ellipsis;
        overflow: hidden;
      }

      button {
        --size: 1.5em;
        position: absolute;
        right: 0.5rem;
        top: 50%;
        width: var(--size);
        height: var(--size);
        min-width: 0;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateY(-50%);

        svg {
          font-size: 1rem;
        }

        &:active {
          opacity: 0.9;
        }
      }

      @media (hover: hover) {
        button {
          opacity: 0;
        }

        &:hover {
          button {
            opacity: 1;
          }
        }
      }
    }

    .profile {
      display: flex;
      bottom: 0;
      padding-bottom: 1rem;

      .user-info {
        display: flex;
        flex-direction: column;
        font-size: 0.8rem;

        p {
          line-height: 1.25;
          margin: 0;
          text-overflow: ellipsis;
          overflow: hidden;
          max-width: 110px;

          &.persona {
            font-size: 0.8em;

            &:hover svg {
              opacity: 1;
            }

            svg {
              opacity: 0;
              transition: opacity 200ms linear;
            }
          }
        }
      }
    }

    .profile,
    .brand {
      position: sticky;

      .icon {
        height: var(--icon-size-lg);

        img {
          width: var(--icon-size-lg);
          height: var(--icon-size-lg);
        }
      }

      &::before {
        content: '';
        position: absolute;
        backdrop-filter: blur(20px);
        z-index: -1;
        overflow: hidden;
        inset-block: 0;
        inset-inline-start: -0.5rem;
        inset-inline-end: -0.5rem;
      }

      &:first-child::before {
        border-end-start-radius: 8px;
        border-end-end-radius: 8px;
      }

      &:last-child::before {
        border-start-start-radius: 8px;
        border-start-end-radius: 8px;
      }
    }

    .nav-group {
      &:hover,
      &:has(.active) {
        > .list-item {
          color: var(--text-hover-color);
        }
      }

      &.collapsed:has(.active) {
        > .list-item {
          background-color: var(--hover-bg);
        }
      }
    }

    .group {
      padding-inline-start: var(--indent);
      transition: padding-inline-start var(--transition-speed)
        var(--transition-function);
    }
  }

  &:not(.pinned) {
    max-width: 62px;
  }

  &:not(.pinned):not(:hover) {
    nav {
      .list-item .content {
        max-width: 0;
        opacity: 0;
        padding: 0;
      }

      .group {
        padding-inline-start: 0;
      }
    }
  }
}

.tab-bar {
  display: none;
  position: fixed;
  inset: auto 0 0;
  background-color: var(--sidebar-bg);
  z-index: calc(var(--z-index) + 1);
  box-shadow: 0 -5px 5px -1px rgb(0 0 0 / 20%), 0 -3px 6px 0 rgb(0 0 0 / 14%),
    0 -3px 7px 0 rgb(0 0 0 / 12%);
}

@media screen and (max-width: 599.95px) {
  aside {
    position: fixed;
    inset: 0;
    max-height: calc(100% - 40px);
    width: 100%;
    max-width: 100%;
    z-index: 200;
    transition: transform var(--transition-speed) var(--transition-function);

    &:not(.expanded) {
      transform: translateY(100%);
    }

    nav {
      grid-template-columns: auto calc(100% - 30px);
      min-width: 100%;

      .list-item .content {
        max-width: calc(100% - 1.8rem);
      }
    }

    > div {
      width: 100%;
    }
  }

  .tab-bar {
    display: flex;
    justify-content: center;
    z-index: 300;

    button {
      color: white;
    }
  }
}


/*# sourceMappingURL=main.054b1ccf.css.map*/