.topbar-container {
  @include display-flex;
  height: 64px;
  padding: 0 16px;
  background: $white;
  box-shadow: $topbar-shadow;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 9999999;

  @include respond(phone) {
    height: 56px;
  }

  .topbar-brand,
  .topbar-actions {
    @include display-flex(flex-start);
  }

  .topbar-brand {
    @include respond(phone) {
      display: none;
    }

    &__logo {
      @include display-flex(flex-start, flex-start);
      width: 40px;
      margin-right: 8px;
    }

    &__number {
      font-size: 10px;
      line-height: 17px;
    }
  }

  .topbar-actions {
    & > div {
      @include display-flex(flex-start);
    }
  }

  .topbar-env-toggle {
    padding-right: 24px;
    margin-right: 24px;
    position: relative;

    .toggle-container {
      margin-left: 26px;
    }

    &::after {
      content: "";
      position: absolute;
      right: 0;
      background: $light-grey;
      width: 1px;
      height: 32px;
    }
  }

  .topbar-search,
  .topbar-notifications-icon,
  .topbar-help-icon {
    @include display-flex(flex-start, flex-start);
    cursor: pointer;
    margin-right: 24px;

    @include respond(phone) {
      margin-right: 20px;
    }

    svg {
      width: 24px;
      height: 100%;

      @include respond(phone) {
        width: 20px;
      }

      path {
        fill: $grey;
      }
    }
  }

  .topbar-menu {
    &-link {
      @include display-flex;
      padding: 4px 16px;
      margin-bottom: 8px;
      transition: all ease-in-out 0.3s;
      cursor: pointer;

      &__icon {
        width: 12px;
        @include display-flex(flex-start, flex-start);
      }

      &:hover {
        background: $light;
      }
    }
  }

  .topbar-help {
    position: relative;
    margin-right: 24px;

    &-icon {
      margin-right: 0;
    }

    &-content {
      padding-top: 16px;
      overflow: hidden;
    }

    &-title {
      padding: 0 16px 4px;
      display: flex;
    }

    &-footer {
      padding: 16px;
      background: $light;

      p {
        margin-bottom: 4px;
      }
    }
  }

  .topbar-notifications-icon {
    .badge-container {
      margin-left: -8px;
      margin-top: -9px;

      @include respond(phone) {
        margin-left: -10px;
        margin-top: -2px;
      }
    }
  }

  .topbar-user {
    &-avatar {
      cursor: pointer;
    }

    &-content {
      .topbar-menu-link {
        justify-content: flex-start;

        &__icon {
          justify-content: center;
          width: 16px;
          margin-right: 8px;

          svg {
            path {
              stroke: $black;
            }
          }
        }
      }
    }

    &-info {
      padding: 16px;
      position: relative;

      &__name {
        display: flex;
        margin-bottom: 4px;
      }

      &__role {
        text-transform: capitalize;
      }

      &::after {
        content: "";
        position: absolute;
        left: 16px;
        bottom: 0;
        height: 1px;
        width: calc(100% - 32px);
        background: $light-grey;
      }
    }

    &-projects-container {
      padding: 16px 0 12px;
      position: relative;
    }

    &-projects {
      margin: 8px 0 16px;

      &__title {
        display: flex;
        padding: 0 16px 4px;
      }

      &__selected {
        @include display-flex;
        padding: 0 16px;
        cursor: pointer;

        & > div {
          @include display-flex(flex-start);
        }
      }

      &__icon {
        @include display-flex(flex-start, flex-start);
        width: 7px;
      }

      &-others {
        width: 240px;
        border-radius: 6px;
        box-shadow: $popper-shadow;
        border: 1px solid $light-grey;
        background: $white;
        position: absolute;
        top: 16px;
        right: 100%;
        display: none;

        &__title {
          display: flex;
          padding: 16px 16px 4px;
        }
      }

      &:hover {
        .topbar-user-projects-others {
          display: block;
        }
      }
    }

    &-projects__action {
      padding: 0 16px;

      .button {
        width: 100%;
        svg {
          margin-right: 10px;
        }
      }
      a,
      a:hover,
      a:active {
        color: white;
      }
    }

    &-logout {
      padding-top: 12px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: 16px;
        top: 0;
        height: 1px;
        width: calc(100% - 32px);
        background: $light-grey;
      }
    }
  }

  .topbar-env-toggle,
  .topbar-search,
  .topbar-help,
  .topbar-user {
    @include respond(phone) {
      display: none !important;
    }
  }

  .topbar-mobile-page {
    display: none;
    color: $dark-grey;

    @include respond(phone) {
      @include display-flex(flex-start);
    }

    &__icon {
      @include display-flex(flex-start, flex-start);
      width: 20px;
      margin-right: 8px;
    }
  }

  div.topbar-mobile-menu-toggle {
    display: none;
    width: 24px;

    @include respond(phone) {
      @include display-flex(flex-start, flex-start);
    }
  }
}

.dashboard-layout-body {
  @include display-flex(flex-start, flex-start);

  .dashboard-layout-content {
    padding: 32px;
    width: 100%;
  }
}

.sidenav-container {
  background: $light;
  padding: 24px 0;
  height: calc(100vh - 64px);
  min-height: 600px;
  width: 100%;
  max-width: 264px;
  border-right: 1px solid $light-grey-2;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  transition: all ease-in-out 0.4s;
  @include display-flex(flex-start, flex-start);

  @include respond(phone) {
    max-width: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 99999;
    border-right: 0;
    height: calc(100vh - 56px);
    min-height: unset;
    overflow: auto;
    display: none;
  }

  .sidenav-menu {
    height: 100%;
    border-right: 1px solid $light-grey-2;
    width: 64px;
    flex: 0 0 64px;
    padding: 0 16px;

    @include respond(phone) {
      width: 100%;
      flex: unset;
      height: auto;
    }

    .sidenav-mobile-search {
      display: none;
      margin-bottom: 24px;

      @include respond(phone) {
        display: block;
      }

      .input-display {
        height: 48px;
      }
    }

    &-item {
      @include display-flex(flex-start, flex-start);

      @include respond(phone) {
        margin-bottom: 24px;
        cursor: pointer;
      }

      &__link {
        @include display-flex(center);
        width: 24px;
        margin: 0 auto 40px;
        cursor: pointer;

        @include respond(phone) {
          margin: 0 16px 0 0;
        }

        svg {
          path {
            transition: all ease-in-out 0.3s;
          }
        }
      }
    }
  }

  .sidenav-submenu {
    position: absolute;
    top: 24px;
    left: 64px;
    width: 200px;
    transition: all ease-in-out 0.4s;

    &.desktopHide {
      display: none;

      @include respond(phone) {
        display: block;
      }
    }

    @include respond(phone) {
      position: relative;
      top: 3px;
      left: unset;
      width: calc(100% - 24px);
    }

    &-title {
      padding: 0 16px;
      margin-bottom: 16px;
      color: $black;
      @include display-flex;
      pointer-events: none;

      @include respond(phone) {
        padding: 0;
        margin-bottom: 0;
        pointer-events: all;
      }

      .action-text {
        @include respond(phone) {
          font-size: 16px;
          font-weight: 500;
          line-height: 1;
          letter-spacing: -0.01px;
        }
      }

      &__dropdown {
        display: none;
        width: 12px;
        transition: all ease-in-out 0.3s;

        svg {
          path {
            fill: $grey;
          }
        }

        @include respond(phone) {
          @include display-flex(flex-start, flex-start);
        }
      }
    }

    &-item-container {
      @include respond(phone) {
        margin-top: 24px;
        display: none;
      }
    }

    &-item {
      height: 42px;
      @include display-flex(flex-start);
      padding: 0 16px;
      margin-bottom: 8px;
      cursor: pointer;
      border-left-color: transparent;
      transition: color ease-in-out 0.2s;
      &.active {
        border-left: 4px solid $primary;
        padding-left: 12px;
        span {
          color: $primary;
        }
        svg {
          path {
            stroke: $primary;
          }
        }
        .fill {
          svg {
            path {
              fill: $primary;
            }
          }
        }
      }
      @include respond(phone) {
        &.active {
          border-left: none;
          padding-left: 0;
        }
        height: auto;
        padding: 0;
        margin-bottom: 32px;
      }

      &__icon {
        @include display-flex(flex-start, flex-start);
        width: 16px;
        margin-right: 8px;
      }

      &__label {
        color: $dark-grey;
      }

      &:last-child {
        @include respond(phone) {
          margin-bottom: 0;
        }
      }
    }
  }

  .sidenav-menu-item {
    &__link {
      position: relative;
      // width: 100%;

      &-title {
        @include display-flex(center);
        background: $primary;
        color: $white;
        position: absolute;
        left: calc(100% + 21px);
        padding: 4px;
        border-radius: 6px;
        z-index: 100;
        opacity: 0;
        pointer-events: none;
        transition: all ease-in-out 0.3s;

        &::before {
          content: "";
          width: 15px;
          height: 15px;
          background: $primary;
          position: absolute;
          left: -2px;
          transform: rotate(136deg);
          z-index: -1;
        }
      }

      &:hover {
        .sidenav-menu-item__link-title {
          opacity: 1;
          pointer-events: all;
        }
      }
    }

    &.active {
      .sidenav-menu-item__link {
        svg {
          path {
            stroke: $primary;
          }
        }
      }

      .sidenav-submenu-title__dropdown {
        transform: rotate(180deg);
      }

      .sidenav-submenu-item-container {
        @include respond(phone) {
          display: block;
        }
      }
    }
  }

  .sidenav-mobile-brand-user,
  .sidenav-mobile-brand {
    background: $white;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid $light-grey;
  }

  .sidenav-mobile-brand-user {
    box-shadow: $input-shadow;
    display: none;

    @include respond(phone) {
      display: block;
    }
  }

  .sidenav-mobile-brand {
    @include display-flex(flex-start);

    .light-font {
      font-size: 10px;
      line-height: 17px;
      display: flex;
      margin-left: 8px;
    }
  }

  .sidenav-mobile-user {
    margin-top: 16px;
    @include display-flex;

    & > div {
      @include display-flex(flex-start);
    }

    .avatar-container {
      margin-right: 8px;
    }
  }

  .sidenav-mobile-logout {
    padding-left: 16px;
    border-left: 1px solid $light-grey;

    &__icon {
      margin-right: 8px;
      @include display-flex(flex-start, flex-start);
    }
  }

  .sidenav-mobile-more {
    padding: 0 16px;
    width: 100%;

    &__back {
      @include display-flex(center);
      width: 32px;
      height: 32px;
      border-radius: 6px;
      border: 1px solid $light-grey;
      cursor: pointer;
      margin-bottom: 32px;

      svg {
        width: 16px;
      }
    }

    &__link {
      margin-bottom: 16px;
      cursor: pointer;
      @include display-flex;

      &-icon {
        @include display-flex(flex-start, flex-start);
      }

      &:first-of-type {
        margin-top: 12px;
      }
    }

    .sidenav-mobile-current-project {
      @include display-flex(flex-start);
      padding: 8px 16px;
      border: 1px solid $light-grey;
      border-radius: 6px;
      margin: 8px 0 16px;
    }

    .sidenav-mobile-add-project {
      width: 100%;
    }

    .sidenav-mobile-switch-project {
      margin: 16px -16px 20px;
      padding: 0 16px 28px;
      border-bottom: 1px solid $light-grey;

      span {
        display: flex;

        &:first-child {
          margin-bottom: 12px;
        }
      }
    }
    .topbar-env-toggle {
      @include display-flex;
      span {
        margin-right: 12px;
      }
    }
  }

  .sidenav-toggle {
    @include full-circle(24px);
    @include display-flex(center);
    background: $white;
    border: 1px solid $light-grey;
    cursor: pointer;
    position: absolute;
    top: 32px;
    right: -12px;

    @include respond(phone) {
      display: none;
    }

    svg {
      width: 5px;
      transition: all ease-in-out 0.3s;
    }
  }

  &.closed {
    width: 64px;

    .sidenav-submenu {
      opacity: 0;
      visibility: hidden;
    }

    .sidenav-toggle {
      svg {
        transform: rotate(180deg);
      }
    }
  }

  &.active {
    @include display-flex(flex-start, flex-start);
  }
}

.topbar-notifications-item {
  padding: 24px 16px;
  border-bottom: 1px solid $light-grey;
}