menu-item.scss

// Mobile.
:host(.hy-menu-item--mobile) {
  --menu-item-display: flex;
  display: flex;
  margin-left: 12px;
  margin-right: 12px;
  margin: 0 12px 5px;

  @include breakpoint($narrow) {
    margin: 0 28px 6px;
  }
}

:host(.hy-menu-item--mobile.hy-menu-item--alternative) {
  border-bottom: 0 none;
  border-top: 1px solid black;
}

:host(.hy-menu-item--mobile:last-of-type) {
  border-bottom: 0 none;
}

:host(.hy-menu-item--mobile.is-hidden) {
  visibility: hidden !important;

  &:focus {
    outline: none;
  }
}

:host(.hy-menu-item--mobile[depth='1']:not(.hy-menu-item--alternative)) a {
  @include font-weight($bold);
}

// Sidenav.
:host(.hy-menu-item--sidenav) {
  display: flex;
  flex-flow: column;
  --hy-menu-item-sidenav-display: block;
}

:host(.hy-menu-item--sidenav.is-hidden--child) {
  --hy-menu-item-sidenav-display: none;
}

:host(.hy-menu-item--sidenav:not(.is-parent)) {
  display: none;
  visibility: hidden;
}

:host(.hy-menu-item--sidenav.is-active) {
  display: block;
  visibility: visible;
}

:host(.hy-menu-item--sidenav.is-active--child) {
  display: block;
  visibility: visible;
}

:host(.hy-menu-item--sidenav.in-active-trail) {
  display: block;
  visibility: visible;
}

:host(.hy-menu-item) {
  a {
    @include font-size(16px, 20px);
    @include font-weight($regular);
    align-items: center;
    color: var(--brand-main-nearly-black);
    display: flex;
    font-family: var(--main-font-family);
    letter-spacing: -0.5px;
    padding: 24px 16px;
    text-decoration: none;
    width: 100%;

    &:focus {
      outline: solid 2px var(--additional-yellow);
      outline-offset: -2px;
    }

    &.hy-menu-item--mobile {
      background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
      color: var(--brand-main-light);
      padding: 14px 12px 14px 20px;

      &.is-active {
        @include font-weight($bold);
        color: var(--grayscale-black);
        position: relative;

        &:before {
          border-left: 3px solid var(--grayscale-black);
          content: '';
          height: 75%;
          left: 10px;
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }

      &.is-heading {
        @include font-size(24px, 24px);
        @include font-weight($bold);
        background: transparent;
        border-bottom: 3px solid var(--brand-main-light);
        color: var(--brand-main-light);
        margin-top: -24px;
        padding-bottom: 24px;
        padding-top: 24px;
        text-transform: uppercase;

        &.is-active,
        &.in-active-trail {
          @include font-weight($bold);
          color: var(--grayscale-black);
          position: relative;

          &:before {
            border-left-width: 4px;
            height: 55%;
          }
        }
      }
    }

    &.is-heading {
      display: inherit;
      @include breakpoint($extrawide) {
        display: none;
      }
    }

    &.hy-menu-item--sidenav {
      @include font-size(18px, 24px);
      @include font-weight($bold);
      color: var(--brand-main-light);
      display: var(--hy-menu-item-sidenav-display);
      font-family: var(--main-font-family);
      margin: 10px 0;
      padding: 8px 0;

      &:focus {
        outline-offset: 4px;
      }

      &:hover {
        color: var(--brand-main-nearly-black);
      }

      &.is-active {
        color: var(--brand-main-nearly-black);
        text-decoration: none;

        .hy-menu-item__label {
          padding-bottom: 0;
        }
      }

      &.is-active--heading {
        @include font-size(26px, 40px);
        color: var(--brand-main-nearly-black);
        text-transform: uppercase;

        .hy-menu-item__label {
          border-bottom: 4px solid var(--brand-main-nearly-black);
          padding: 0;

          &__icon {
            display: none;
          }
        }
      }

      &.is-active--child {
        color: var(--brand-main-light);
        text-decoration: none;
      }

      .hy-menu-item__label__icon {
        color: var(--brand-main-light);
        display: inline-block;
        padding-left: 5px;

        .is-active & {
          display: none;
        }
      }

      &.is-parent {
        @include font-size(16px, 22px);
        @include font-weight($semibold);
        align-items: center;
        color: var(--brand-main-light);
        display: flex;
        text-decoration: none;

        &:hover {
          color: var(--brand-main-nearly-black);
          .hy-menu-item__label__icon {
            color: var(--brand-main-nearly-black);
          }
        }

        .hy-menu-item__label__icon {
          margin-right: 8px;
        }
      }
    }
  }
}

.hy-menu-item__button {
  align-items: center;
  background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
  border-bottom: 0;
  border-left: 1px dotted var(--brand-main-light);
  border-right: 0;
  border-top: 0;
  cursor: pointer;
  display: var(--menu-item-display);
  justify-content: center;
  padding: 0;
  width: 50px;

  svg {
    fill: var(--brand-main-light);
  }
}