.sidebar-tabs {
  width: 220px;
  border-right: 1px solid $color-border;
  padding: 8px;
  height: calc(100vh - 50px);
  overflow-y: auto;
  ul {
    li {
      a {
        display: flex;
        align-items: center;
        color: $color-heading;
        position: relative;
        z-index: 1;
        padding: 8px 16px;
        font-weight: 500;
        transition: 0.3s ease-in-out;
        align-items: center;
        justify-content: space-between;

        &:after {
          position: absolute;
          content: "";
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: $primary-95;
          border-radius: 4px;
          z-index: -1;
          opacity: 0;
          visibility: hidden;
          transition: 0.3s ease-in-out;
        }
        &:hover {
          color: $color-heading;

          &:after {
            opacity: 1;
            visibility: visible;
            background-color: $gray-97;
          }
        }
        &.is-active {
          color: $ac-primary;
          &:hover {
            &::after {
              background-color: $primary-90;
            }
          }
          &:after {
            opacity: 1;
            visibility: visible;
            border: 1px solid $ac-primary;
          }
          &.is-danger {
            color: $danger;
            &:hover {
              &::after {
                background-color: $red-90;
              }
            }
            &:after {
              opacity: 1;
              visibility: visible;
              background-color: $red-95;
              border: 1px solid $danger;
            }
          }
          &.is-success {
            color: $success;
            &:hover {
              &::after {
                background-color: $green-90;
              }
            }
            &:after {
              opacity: 1;
              visibility: visible;
              background-color: $green-95;
              border: 1px solid $success;
            }
          }
          &.is-warning {
            color: $warning;
            &:hover {
              &::after {
                background-color: $yellow-90;
              }
            }
            &:after {
              opacity: 1;
              visibility: visible;
              background-color: $yellow-95;
              border: 1px solid $warning;
            }
          }
        }
        &.is-danger {
          color: $danger;
          &:hover {
            &::after {
              background-color: $red-90;
            }
          }
          &:after {
            opacity: 1;
            visibility: visible;
            background-color: transparent;
          }
        }
        &.is-success {
          color: $success;
          &:hover {
            &::after {
              background-color: $green-90;
            }
          }
          &:after {
            opacity: 1;
            visibility: visible;
            background-color: transparent;
          }
        }
        &.is-warning {
          color: $warning;
          &:hover {
            &::after {
              background-color: $yellow-90;
            }
          }
          &:after {
            opacity: 1;
            visibility: visible;
            background-color: transparent;
          }
        }
      }
      &.is-open {
        transition: 0.3s ease-in-out;
        ul {
          max-height: 1000px;
        }
      }
      ul {
        margin-left: 20px;
        position: relative;
        z-index: 1;
        max-height: 0;
        transition: 0.3s ease-in-out !important;
        overflow: hidden;
        &:after {
          position: absolute;
          content: "";
          left: 4px;
          top: 0;
          width: 1px;
          height: calc(100% - 10px);
          background-color: $color-border;
        }
        li {
          a {
            &:after {
              left: -8px;
              opacity: 0 !important;
              visibility: hidden !important;
            }
            &::before {
              position: absolute;
              content: "";
              left: 0;
              top: 50%;
              margin-top: -4px;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background-color: $ac-primary;
              transition: 0.3s ease-in-out;
              opacity: 0;
              visibility: hidden;
            }
            &:hover:not(&.is-active) {
              &::before {
                opacity: 1;
                visibility: visible;
                background-color: $primary-80;
              }
            }
            &.is-active {
              &::before {
                opacity: 1;
                visibility: visible;
              }
            }
          }
        }
      }
    }
  }
}