/*! **********************************
*****     menu-horizontal-kk     *****
*********************************** */

@layer component {
  @scope ([data-component-id$=":menu-horizontal-kk"]) {
    /*:scope {
      background-color: gray;
    }*/

    .first-level {
      position: relative;
      -moz-column-gap: var(--sp-4);
           column-gap: var(--sp-4);
      padding-block: var(--sp-4) /* !important */;
    }

    .second-level {
      position: absolute;
      left: 0;
      bottom: -100%;
      z-index: 10;
      width: 100%;
      padding-block: var(--sp-4) /* !important */;
      -moz-column-gap: var(--sp-4);
           column-gap: var(--sp-4);
    }

      .second-level::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--sp-4px);
        background-color: var(--clr-primary-500);
        transition: width var(--speed-500);
      }

        @starting-style {

      .second-level::before {
          width: 0;
      }
        } /* End of .second-level */

    .menu-link {
      font-size: 1.25rem;
      color: var(--clr-fg-500);
      text-transform: uppercase;
      -webkit-text-decoration: none;
      text-decoration: none;
      transition: color var(--speed-300);
    }

      .menu-link:hover {
        color: var(--clr-primary-500);
        transition: color var(--speed-300);
      } /* End of .menu-link */

    .in-trail {
      color: var(--clr-primary-500);
    }

    .is-active {
      position: relative;
    }

      .is-active::after {
        content: "—";
        display: inline-block;
        position: absolute;
        right: -1.25em;
        top: 0;
        color: inherit;
      } /* End of .is-active */
  } /* End of @scope([data-component-id$=":menu-kk"]) */
} /* End of @layer component */