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

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

  wvr-nav-list-component.mobile-layout {
    display: inline-block;
    overflow: hidden;
    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 {
      [role=menu] {
        height: auto;
      }

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

        > a {
          padding: 0px;
          margin-bottom: 0x;
          color: inherit;
          font-weight: inherit;
          width: 100%;
          display: block;
        }

        > a:hover {
          font-weight: inherit;
          color: inherit;
          background: inherit;
          text-decoration: none;
        }
      }

      tl-nav-li:hover {
        font-weight: bolder;
        color: var(--tl-white);
        background: var(--tl-deep-grey);
        text-decoration: none;
      }
    }
  }

}