.tmpl-menu {
  display: flex;
  height: $menu-size;
  position: relative;
  background-color: $background-medium;

  .tmpl-mainmenu {
    transition: background-color 0.25s ease-in;
    display: flex;
    align-items: center;

    &:has(.tmpl-mainmenu__items.visible) {
      background-color: $background-default;

      h2 {
        color: $text-danger-hover;
      }

      img {
        fill: $text-danger-hover;
      }
    }

    h2,
    img {
      line-height: $menu-size;
      color: $text-light;
      font-size: $font-size-lg;
      font-weight: $font-weight-semibold;
      font-family: $font-family-primary;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      padding: 0 10px;
    }

    .tmpl-mainmenu__items {
      position: absolute;
      left: 0;
      top: $menu-size;
      width: 100%;
      background-color: $background-default;
      z-index: 3;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.25s ease, visibility 0.25s ease;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      display: flex;
      gap: 25px;
      flex-wrap: wrap;
      padding: 10px;

      &.visible {
        opacity: 1;
        visibility: visible;
      }

      .tmpl-submenu {
        flex-grow: 0;
        flex-shrink: 0;
        min-width: 200px;
        padding-top: 10px;

        h5 {
          padding: 0 0 10px 0;
          margin: 0 0 10px 0;
          color: $background-medium;
          line-height: $line-height-lg;
          font-size: $font-size-lg;
          font-weight: $font-weight-semibold;
          border-bottom: 1px solid $border-secondary;
          cursor: pointer;
          font-family: $font-family-primary;
          &:hover {
            color: $background-dark;
          }
        }

        .tmpl-submenu__items {
          display: inline-flex;
          flex-direction: column;

          p {
            padding: 3px 0;
            margin: 0;
            color: $text-dark;
            line-height: $line-height-lg;
            font-size: $font-size-lg;
            font-weight: $font-weight-regular;
            transition: color 0.25s ease-in;
            cursor: pointer;
            display: inline-block;
            font-family: $font-family-primary;

            &:hover {
              color: $text-danger-hover;
            }
          }
        }
      }
    }
  }
}