@import "../../shared/styles/tl-variables.scss";

:host {
  --wvr-nav-list-component-max-height: 450px;

  width: 27%;
  padding-bottom: 35px;

  .section-title {
    padding-bottom: 3px;
    color: var(--tl-primary);
    font-size: var(--tl-h3-font-size);
    font-weight: 600;
    border-bottom: 2px solid var(--tl-primary);
  }

  .section-title.mobile-layout {
    tl-icon-component {
      float: right;
      transition: 0.5s ease-in-out;
      transform: rotate(0deg);
    }
  }

  .section-title.mobile-layout.active {
    tl-icon-component {
      float: right;
      transition: 0.25s ease-in-out;
      transform: rotate(90deg);
    }
  }

  wvr-nav-list-component.mobile-layout {
    display: inline-block;
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.25s ease-in-out;
  }

  wvr-nav-list-component.mobile-layout.active {
    max-height: var(--wvr-nav-list-component-max-height);
    transition: max-height 1s ease-in-out;
  }


  p {
    margin-bottom: 3px;
  }

  wvr-nav-list-component {
    ::ng-deep {
      ul{
        height: auto;
      }

      tl-nav-li {
        width: 100%;

        a {
          padding: 4px 0px 6px 25px;
          margin-bottom:2px;
          color: var(--tl-deep-grey);
          font-weight: lighter;
          width: 100%;
          display: block;
        }

        a:focus-within,
        a:hover {
          font-weight: bolder;
          color: var(--tl-white);
          background: var(--tl-deep-grey);
          text-decoration: none;
        }
      }
    }
  }

}