// Profile page sidebar
.#{$prefix}-profile {
  &-content {
    .#{$prefix}-content-left {
      .#{$prefix}-nav-tabs {
        display: flex;
        flex-direction: column;
        gap: 0.313rem;
        padding: 0;
        margin: 0;
        li {
          a {
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            border: 0.063rem solid transparent;
            color: rgb(var(--wpt-lms-gray));
            display: flex;
            align-items: center;
            gap: 0.5rem;
            text-decoration: none;
            font-size: 0.875rem;
            transition: all 0.15s ease-in-out;
            font-weight: 500;
            i {
              font-size: 1.125rem;
              color: rgb(var(--wpt-lms-gray));
              transition: all 0.15s ease-in-out;
            }
          }
          &:hover {
            a {
              color: rgb(var(--wpt-lms-black));
              background-color: rgba(var(--wpt-lms-gray), 0.1);
              i {
                color: rgb(var(--wpt-lms-black));
              }
            }
            .profile-tab-sections {
              li {
                a {
                  background-color: rgb(var(--wpt-lms-white));
                }
              }
            }
          }
          &.active {
            a {
              border-color: rgb(var(--wpt-lms-primary-300));
              background-color: rgb(var(--wpt-lms-primary-100));
              font-weight: 500;
              color: rgb(var(--wpt-lms-primary-700));
              box-shadow: 0 0.125rem 0.25rem rgba(var(--wpt-lms-primary-800), 0.15);
              i {
                color: rgba(var(--wpt-lms-primary-800));
              }
            }
            .profile-tab-sections {
              border: 0.063rem solid rgb(var(--wpt-lms-box-border));
              li {
                a {
                  background-color: rgb(var(--wpt-lms-white));
                  border: none;
                  box-shadow: none;
                }
              }
            }
          }
        }
        .has-child {
          position: relative;
          .profile-tab-sections {
            display: none;
            flex-direction: column;
            gap: 0.25rem;
            position: absolute;
            z-index: 1000;
            top: 0;
            left: 100%;
            width: max-content;
            margin: 0;
            padding: 0;
            border: 0.063rem solid rgb(var(--wpt-lms-box-border));
            background-color: rgb(var(--wpt-lms-white));
            box-shadow: 0 0.063rem 0.25rem rgba(var(--wpt-lms-primary-950), 0.06);
            border-radius: 0.75rem;
            list-style: none;
            padding: 0.25rem;
            li {
              a {
                color: rgb(var(--wpt-lms-gray));
                border-radius: 0.5rem;
                font-size: 0.75rem;
                gap: 0.5rem;
                &:hover {
                  color: rgb(var(--wpt-lms-black));
                  background-color: rgba(var(--wpt-lms-gray), 0.1);
                  i {
                    color: rgb(var(--wpt-lms-black));
                  }
                }
                i {
                  color: rgb(var(--wpt-lms-gray));
                  font-size: 0.875rem;
                }
              }
              &.active {
                a {
                  border-color: rgb(var(--wpt-lms-primary-300));
                  background-color: rgb(var(--wpt-lms-primary-100));
                  font-weight: 500;
                  color: rgb(var(--wpt-lms-primary-700));
                  box-shadow: none;
                  i {
                    color: rgba(var(--wpt-lms-primary-800));
                  }
                }
              }
            }
          }
          &:hover .profile-tab-sections {
            display: flex;
          }
        }
      }
    }
  }
}
// Responsive
@media (max-width: 992px) {
  .#{$prefix}-profile {
    &-content {
      .#{$prefix}-content-left {
        .#{$prefix}-nav-tabs {
          display: flex;
          flex-direction: column;
          gap: 0.313rem;
          .has-child {
            .profile-tab-sections {
              display: none !important;
            }
          }
        }
      }
    }
  }
}