/* ==================================================
   КУРСОР ДЛЯ ИНТЕРАКТИВНЫХ ПУНКТОВ
================================================== */

.menu-certification,
.menu-for-clients,
.menu-lang,
.feed-certification,
.food-certification,
.submenu-hover {
  cursor: pointer;
}


/* ==================================================
   ВСЕ ПОДМЕНЮ ИЗНАЧАЛЬНО СКРЫТЫ
================================================== */

.certification-submenu,
.feed-certification-submenu,
.food-certification-submenu,
.for-clients-submenu,
.lang-submenu {
  display: block !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  z-index: 99999 !important;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s;
}


/* Первый уровень появляется сверху вниз */

.certification-submenu,
.for-clients-submenu,
.lang-submenu {
  transform: translateY(8px);
}


/* Второй уровень появляется слева направо */

.feed-certification-submenu,
.food-certification-submenu {
  transform: translateX(8px);
}


/* ==================================================
   ОТКРЫТОЕ СОСТОЯНИЕ ПОДМЕНЮ
================================================== */

.certification-submenu.is-open,
.feed-certification-submenu.is-open,
.food-certification-submenu.is-open,
.for-clients-submenu.is-open,
.lang-submenu.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transform: translate(0, 0) !important;

  transition-delay: 0s;
}


/* ==================================================
   АНИМАЦИЯ ФОНА ПУНКТОВ
================================================== */

.menu-hover-background {
  transition: background-color 0.2s ease !important;
}

/*
 * Эти классы JavaScript добавит автоматически,
 * если белый фон Flex-группы сделан через псевдоэлемент.
 */

.menu-hover-background-before::before,
.menu-hover-background-after::after {
  background-color: #F2F2F2 !important;
}
</style>