@use "../../scss/mixins";

.zn-nav.zn-transparent {
  background: transparent;
}

.zn-nav {
  background: rgba(var(--zn-panel), var(--zn-panel-opacity));
  border-right: 1px solid rgb(var(--zn-border-color));
  max-width: mixins.common-size(sidenav);
  height: 100%;
  padding-top: 5px;

  ul {
    list-style: none;
    padding-bottom: 10px;
    margin: 0;
    display: flex;
    flex-direction: column;
    position: relative;

    &:after {
      content: '';
      height: 1px;
      left: 18px;
      right: 18px;
      bottom: 0;
      position: absolute;
      background: rgb(var(--zn-border-color));
    }

    li {
      a {
        text-decoration: none;
        color: rgb(var(--zn-text));
        display: block;
        font-weight: 500;
        cursor: pointer;

        &:hover, &.zn-tb-active {
          background: rgb(var(--zn-body));
        }

        &.zn-tb-active {
          color: rgb(var(--zn-purple-text));
        }
      }
    }
  }

  ul:last-child:after {
    display: none;
  }

  strong, li a {
    padding: 10px 20px;
  }


  strong {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    letter-spacing: 0.93px;
    color: rgb(var(--zn-text-heading));
    font-weight: 600;
    padding-bottom: 5px;
    text-transform: uppercase;
  }

}