ul {
  margin: 0;
  padding: 4px 0 4px 0;
  padding-inline-start: 20px;

  li {
    padding: 2px 0 2px 0;
  }
}

ol {
  margin: 0;
  padding: 4px 0 4px 0;
  padding-inline-start: 20px;

  li {
    padding: 2px 0 2px 0;
  }
}

.sw-list{  
  margin: 0px;
  list-style-type: none;
  padding: 0px;
  transition: height 0.2s cubic-bezier(0.08,0.52,0.52,1);

  .sw-item{
    padding: 8px 12px 8px 12px;
    display: block;

    &.active{
      border-left: 2px solid;
    }
    .sw-list-label{
      margin: -8px -12px -8px -12px;
    }
  }  
  
  .sw-list-label{
    border-radius: .25rem;
    color: var(--theme-primary);
    font-weight: bolder;
    cursor: pointer;
    display: flex;
    line-height: 20px;
    justify-content: space-between;
    margin: 0;
    padding: 8px 12px;
    user-select: none;
    margin-top: 8px;

    &.active{
      background-color: $gray-1;
      
      +.sw-list{
        margin-bottom: -8px;
        .sw-item{
          .sw-list-label{
            +.sw-list{
              margin-top: 8px;
            }
          }
        }
      }

    }

    &:hover{
      background-color: $gray-1;
    }

    +.sw-list{
      height: 0;
      overflow: hidden;
      border-left: 1px solid var(--theme-primary);
    }

    &::after{
      background-image: url('data:image/svg+xml;utf8,<svg alt="Arrow" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
      background-size: 2rem 2rem;
      background-position: 50%;
      content: " ";
      display: inline-block;
      height: 1.25rem;
      width: 1.25rem;
      transition: transform .2s linear;
      transform: rotate(90deg);
    }

    &.active{
      &::after{
        background-image: url('data:image/svg+xml;utf8,<svg alt="Arrow" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
        background-size: 2rem 2rem;
        background-position: 50%;
        content: " ";
        display: inline-block;
        height: 1.25rem;
        width: 1.25rem;
        transition: transform .2s linear;
        transform: rotate(180deg);
      }
      +.sw-list{
        height: auto;
        overflow: auto;
      }
    }


  }

}