.ac-system-left-sidebar {
  &.is-light {
    .ac-left-sidebar-wrapper {
      background-color: $secondary-light-gray;

      .ac-left-sidebar {
        .sidebar-header {
          border-bottom: 1px solid rgba(1, 1, 1, 0.1);
        }
        .sidebar-footer {
          border-top: 1px solid rgba(1, 1, 1, 0.1);
        }

        .menu-list {
          &.ac-menu-list {
            li {
              a {
                color: $color-heading;

                span {
                  img {
                    filter: brightness(1);
                  }
                }
                strong {
                  color: $color-text;
                }
              }
              .label-text {
                color: $color-text;
              }
            }
          }
        }
      }
    }
  }
}

.ac-left-sidebar-wrapper {
  position: fixed;
  top: 0px;
  z-index: 99999;
  background-color: $color-sidebar;
  width: 250px;
  transition: 0.3s ease-in-out;
}

.ac-left-sidebar {
  .menu-list {
    &.ac-menu-list {
      height: calc(100vh - 80px);
      overflow-y: auto;
      padding-top: 4px;
      scrollbar-color: transparent transparent;
      scrollbar-width: none;

      /* width */
      &::-webkit-scrollbar {
        display: none;
      }

      &::-webkit-scrollbar {
        display: none;
      }

      li {
        &.is-open {
          a {
            &.ac-dropdown-button {
              .ac-arrow-down {
                transform: rotate(-180deg);
                transform-origin: 5px;
              }
            }
          }

          ul {
            li {
              a {
                strong {
                  font-weight: 500;
                }
              }
            }
          }
        }

        a {
          font-style: normal;
          font-weight: 500;
          font-size: 1rem;
          line-height: 16px;
          color: $white-100;
          position: relative;
          z-index: 1;
          padding: 10px 15px 10px 24px;
          transition: 0.3s ease-in-out;
          display: flex;
          align-items: center;

          &:after {
            position: absolute;
            content: "";
            left: 10px;
            top: 0;
            width: calc(100% - 20px);
            height: 100%;
            background: $ac-primary;
            border-radius: 4px;
            z-index: -1;
            transition: 0.3s ease-in-out;
            opacity: 0;
            visibility: hidden;
          }

          strong {
            max-width: calc(100% - 65px);
            line-break: auto;
            white-space: break-spaces;
            display: flex;
            align-items: center;
            overflow: hidden;
            font-weight: 500;
            transition: 0.3s ease-in-out;
          }

          &.ac-dropdown-button {
            user-select: none;

            .ac-arrow-down {
              position: absolute;
              margin-right: 0;
              right: 20px;
              transition: transform 0.3s;
              transform-origin: 4px;
              color: $gray-70;
            }
          }

          &:hover {
            background-color: transparent;

            &:after {
              color: $ac-primary;
              opacity: 0.2;
              visibility: visible;
            }

            span {
              color: $white-100;

              img {
                filter: brightness(10);
              }
            }
          }

          span {
            margin-right: 12px;
            width: 16px;
            height: 16px;
            color: $gray-30;
            font-size: 16px;

            img {
              width: 100%;
              filter: brightness(10);
              transition: 0.3s ease-in-out;
            }
          }
        }

        ul {
          margin: 0;
          padding: 0;
          border-left: none;
          overflow: hidden;

          li {
            a {
              padding-left: 52px;
              font-size: 1rem;
              padding-top: 10px;
              padding-bottom: 10px;
            }
          }
        }
      }
    }
    a {
      &.is-active {
        background-color: transparent;
        &::after {
          opacity: 1 !important;
          visibility: visible !important;
        }
      }
    }
  }
}

.sidebar-collapsed:not(.is-hoverable) {
  .ac-left-sidebar-wrapper {
    width: 60px;
    .ac-left-sidebar {
      .menu-list {
        &.ac-menu-list {
          li {
            a {
              padding: 10px 15px;
              display: flex;
              align-items: center;
              justify-content: center;

              span {
                margin: 0;
              }
              .ac-arrow-down {
                display: none;
                // change
              }
              strong {
                opacity: 0;
                visibility: hidden;
                display: none;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                line-clamp: 1;
                -webkit-line-clamp: 1;
                box-orient: vertical;
                -webkit-box-orient: vertical;
                transition: 0.3s ease-in-out;
                // change
              }
            }
            ul {
              li {
                a {
                  padding-left: 15px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
          }
        }
      }
    }
  }
}

.router-link-exact-active {
  .whats-new-rel {
    background-color: #fff;
    color: $ac-primary !important;
    z-index: 9;
    &::after,
    &::before {
      background-color: #fff;
    }
  }
}