@use 'apps/dashboard/src/variables' as *;

:host,
.app-navbar {
  height: 100%;
}

:host * {
  // prettier-ignore
  @include scrollbar-style(
    10px,
    rgba(0, 0, 0, 0.06),
    rgba(0, 0, 0, 0.10),
    rgba(0, 0, 0, 0.20),
    rgba(0, 0, 0, 0.40)
  );
}

.navbar-scroll-container {
  background: $color-primary-lighter;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  overflow-y: auto;
  overflow-x: hidden;
  .navbar-content {
    flex: 1 1 auto;
    width: 100%;
  }
  .navbar-footer {
    flex: 0 0 auto;
    width: 100%;
  }

  .nav-group {
    border-bottom: 1px solid $color-light-stronger;
    padding: 0;

    .group-items {
      .nav-link {
        align-items: center;
        color: inherit;
        cursor: pointer;
        display: flex;
        overflow: hidden;
        padding: rhythm(1.5);
        position: relative;
        text-decoration: none;
        user-select: none;
        transition: background-color $transition-hint;

        pa-icon {
          display: flex;
          transition: transform $transition-hint;

          &.expanded {
            transform: rotate(90deg);
          }
        }
        &:hover {
          background-color: $color-neutral-lightest;
        }
        &.active {
          background-color: $color-light-stronger;
        }
        &:not(.active).sub-item {
          background-color: $color-primary-lightest;

          &:not(.disabled):not(.unauthorized):hover {
            background-color: $color-neutral-lightest;
          }
        }
        &.sub-item.sync {
          .nav-link-title {
            font-weight: $font-weight-thin;
            padding: rhythm(1.5);
            font-size: font-size(s);
            display: flex;
          }
          img {
            margin: 0 rhythm(0.5);
            width: rhythm(2);
          }
        }

        &.disabled {
          cursor: not-allowed;
          pointer-events: none;
        }
        &.disabled,
        &.unauthorized {
          pa-icon,
          .nav-link-title {
            opacity: 0.5;
          }
        }

        .nav-link-title {
          flex: 1 1 auto;
          font-size: font-size(s);
          font-weight: $font-weight-semi-bold;
          padding-left: rhythm(2);
          white-space: nowrap;
        }
      }
    }
  }
}

.dark {
  @include dark-mode();

  .nav-group .group-items .nav-link {
    &:hover {
      background-color: $color-neutral-regular;
    }
    &:not(:hover).active {
      color: $color-dark-stronger;
    }
    &.sub-item {
      color: $color-dark-stronger;
      &:hover {
        background-color: $color-neutral-lightest;
      }
    }
  }
}
