/*******************************
            Content
*******************************/

@layer topbarMenu.shadow {

  :host {
    --topbar-menu-item-spacing: 10px;
    --topbar-menu-item-padding: 4px 3px;
    --topbar-menu-item-font-size: var(--14px);
    --topbar-menu-item-font-weight: var(--bold);
    --topbar-menu-item-color: var(--white-30);

    --topbar-menu-icon-color: var(--white);

    --topbar-menu-item-hover-color: var(--white-90);

    --topbar-menu-item-active-color: var(--white);
    --topbar-menu-item-active-font-weight: var(--bold);

    --topbar-menu-item-active-underline-height: 2px;
    --topbar-menu-item-active-underline-color: var(--primary-text-color);
    --topbar-menu-item-active-underline-transition: transform 0.3s ease;
  }

  ui-menu {
    display: inline-flex;

    .item {
      cursor: default;
      position: relative;
      overflow: hidden;
      flex: 0 1 auto;
      margin: 0px var(--topbar-menu-item-spacing) 0px;
      padding: var(--topbar-menu-item-padding);
      color: var(--topbar-menu-item-color);
      font-size: var(--topbar-menu-item-font-size);
      font-weight: var(--topbar-menu-item-font-weight);
      text-decoration: none;
    }
    .item:last-child {
      margin-right: 0rem;
    }
    a.item[href] {
      cursor: pointer;
    }
    a.item:hover:not(.active) {
      color: var(--topbar-menu-item-hover-color);
    }

    .item:before,
    .item:after {
      position: absolute;
      content: '';
      background-color: var(--topbar-menu-item-active-underline-color);
      top: 100%;
      left: 0px;
      width: 100%;
      height: var(--topbar-menu-item-active-underline-height);
      margin-top: calc(var(--topbar-menu-item-active-underline-height) * -1);
      transition: var(--topbar-menu-item-active-underline-transition);
    }
    .item:before {
      transform: translateX(-105%);
    }
    .item:after {
      transform: translateX(105%);
    }
    .active.item {
      color: var(--topbar-menu-item-active-color);
      font-weight: var(--topbar-menu-item-active-font-weight);
    }

    .icon.item {
      color: var(--topbar-menu-icon-color);
    }

    /* Active */
    .active.item:before,
    .active.item:after {
      transform: translateX(0%);
    }

    /* Mobile */
    .item.mobile-only {
      display: none;
    }
    .item.mobile-hidden {
      display: block;
    }

    @media screen and (max-width: 767px) {
      .item.mobile-only {
        display: block;
      }
      .item.mobile-hidden {
        display: none;
      }
    }
  }
}