@use '@styles/variables.module.scss' as *;

$sidebar-open-width: 27rem;
$sidebar-closed-width: 3.5rem;

.sidebar {
  position: relative;
  overflow-x: visible;

  height: 100%;
  flex-shrink: 0; // Prevent sidebar from changing width

  width: 27rem;
  border-right: 1px solid $border;
  background: $color-primary;

  width: $sidebar-open-width;
  transition: width 0.25s cubic-bezier(0.4, 0.05, 0.2, 1);

  display: flex;
  justify-content: center;

  &.open {
    width: $sidebar-open-width;
  }

  &.close {
    width: $sidebar-closed-width;
  }

  .sidebar-content {
    overflow-y: auto;
    width: 100%;

    opacity: 1;
    pointer-events: auto;

    display: flex;
    flex-direction: column;

    .toggle-btn {
      position: absolute;
      top: 3rem;
      right: -1.7rem;
      z-index: 20;

      width: 3.5rem;
      height: 3.5rem;

      border-radius: 50%;
    }

    .inner {
      overflow-x: hidden;
      flex: 1 1 auto;
      padding-inline: 1.5rem;

      display: flex;
      flex-direction: column;

      transition: opacity 0.18s;

      &.show {
        opacity: 1;
        pointer-events: auto;
        transition: opacity 0.5s cubic-bezier(0.4, 0.05, 0.2, 1);
      }

      &.hide {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.1s cubic-bezier(0.4, 0.05, 0.2, 1);
      }

      .top {
        padding-block: 2rem;
        padding-left: 2rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid $color-lighter;

        .profile {
          border-radius: $border-radius;
          color: $color-secondary;

          display: flex;
          align-items: center;
          gap: 1rem;

          .profile-text {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;

            .username {
              font-size: 1.5rem;
              font-weight: 600;
            }

            .role {
              font-size: 0.96rem;
              font-weight: 400;
              text-transform: capitalize;
            }
          }
        }
      }

      .nav {
        flex: 1 1 auto;

        ul {
          list-style: none;
          margin: 0;
          padding: 0;

          li {
            margin-bottom: 0.4rem;

            .nav-btn {
              justify-content: left;
              height: 4.1rem;
            }

            .line {
              display: flex;
              align-items: center;
              gap: 1rem;
            }
          }
        }
      }
    }
  }
}

// Active nav button styling
.active {
  background: $color-accent;
  border-radius: $border-radius;
  pointer-events: none;
}
