.top-menu {
  --item-gap: calc(var(--grid-gap) / 4);
  --root-item-gap: 8px;
  border-bottom: 1px solid var(--border-color);
  background: hsl(0, 0%, 100%);
}

.body .container.top-menu__root-items {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.body .container.top-menu__root-items {
  padding-left: calc((var(--grid-gap) - var(--root-item-gap)) / 2);
  padding-right: calc((var(--grid-gap) - var(--root-item-gap)) / 2);
}

.top-menu__root-item {
  position: relative;
  transition:
    background-color 0.15s ease-out,
    box-shadow 0.15s ease-out;
  margin: 0;
  padding: 0;
}

.top-menu__root-item--selected .top-menu__root-item-link:after {
  content: '';
  display: block;
  position: absolute;
  height: 3px;
  background: var(--primary-color);
  bottom: 0;
  right: 0;
  left: calc(var(--grid-gap) / 2);
  transition:
    left 0.15s ease-out,
    right 0.15s ease-out,
    height 0.15s ease-out;
}

.top-menu__root-item--selected:hover .top-menu__root-item-link:after {
  right: 50%;
  left: 50%;
  height: 0;
}

.top-menu__root-item:last-child .top-menu__child-items {
  right: 100%;
  left: unset;
}

.top-menu__root-item-link {
  padding: 0 calc(var(--root-item-gap) / 2);
  display: flex;
  min-height: 70px;
  align-items: center;
  font-size: calc(16rem/var(--initial-font-multiplier));
  position: relative;
}

.top-menu__root-item--more .top-menu__root-item-link {
  width: 85px;
}

.top-menu__root-item-icon {
  color: hsl(240, 7%, 86%);
  min-width: 11px;
  margin-right: 10px;
  transition: color 0.15s ease-out;
}

.top-menu__root-item-label {
  color: hsl(240, 9%, 45%);
}

.top-menu__items,
.top-menu__child-items {
  list-style-type: none;
  position: absolute;
  background: hsl(0, 0%, 100%);
  z-index: 10001;
  box-shadow: 0 8px 26px hsla(0, 0%, 0%, 0.13);
  border-radius: 4px;
  width: calc(260rem/var(--initial-font-multiplier));
  display: none;
  margin: 0;
  padding: var(--item-gap) 0;
  animation: fadeInAnimation 0.25s ease-out;
}

.top-menu__root-item:last-child .top-menu__items {
  right: 0;
}

.top-menu__item,
.top-menu__child-item {
  position: relative;
  margin: 0;
  padding: var(--item-gap) 32px;
}

.top-menu__item-link,
.top-menu__child-item-link {
  font-size: calc(16rem/var(--initial-font-multiplier));
  color: var(--primary-color);
}

.top-menu__child-items {
  border-radius: 0 4px 4px 0;
  left: 100%;
  top: calc(var(--item-gap) * -1);
}

.body--sticky-top-menu .top-menu {
  position: sticky;
  top: 0;
  z-index: 10;
}

.body--sticky-top-menu .top-menu__root-items {
  position: relative;
}

.body--sticky-top-menu .top-menu__root-item {
  position: static;
}

.body--sticky-top-menu .top-menu__items {
  width: auto;
  left: 0;
  right: 0;
  grid-template-columns: repeat(3, 1fr);
  padding: var(--grid-gap);
}

.body--sticky-top-menu .top-menu__item--title {
  grid-column: 1 / -1;
  padding-bottom: 20px;
}

.body--sticky-top-menu .top-menu__child-items {
  display: none !important;
}

:root.root--special .top-menu {
  border-color: var(--special-text-color);
}

:root.root--special .top-menu,
:root.root--special .top-menu__items,
:root.root--special .top-menu__child-items,
:root.root--special .top-menu__item-link,
:root.root--special .top-menu__child-item-link,
:root.root--special .top-menu__root-item-label,
:root.root--special .top-menu__root-item-icon {
  background-color: var(--special-background-color);
  color: var(--special-text-color);
}

:root.root--special .top-menu__root-item--selected .top-menu__root-item-link:after {
  background-color: var(--special-text-color);
}

:root.root--special .top-menu__items,
:root.root--special .top-menu__child-items {
  border: 1px solid var(--special-text-color);
}

:root.root--special .top-menu__items {
  justify-content: flex-start;
}

:root.root--special[data-special-font-size="medium"] .top-menu__root-items,
:root.root--special[data-special-font-size="big"] .top-menu__root-items,
:root.root--special[data-special-font-spacing="big"] .top-menu__root-items,
:root.root--special[data-special-font-spacing="big"] .top-menu__root-items {
  justify-content: flex-start;
}

@media screen and (min-width: 1088px) and (hover: hover) {
  .top-menu__root-item:hover {
    background: hsla(0, 0%, 0%, 0.025);
    box-shadow:
      -5px 0 0 0 hsla(0, 0%, 0%, 0.025),
      5px 0 0 0 hsla(0, 0%, 0%, 0.025);
  }

  .top-menu__root-item:hover .top-menu__root-item-link {
    border: none;
  }

  .top-menu__root-item:hover .top-menu__root-item-icon {
    color: var(--primary-color);
  }

  .top-menu__root-item:hover .top-menu__root-item-label {
    color: var(--text-color);
  }

  .top-menu__root-item:hover .top-menu__items {
    display: grid;
  }

  .top-menu__item-link:hover,
  .top-menu__child-item-link:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary-color-25);
  }

  .top-menu__item:hover .top-menu__child-items {
    display: grid;
  }

  :root.root--special .top-menu__root-item:hover,
  :root.root--special .top-menu__root-item:hover .top-menu__root-item-label,
  :root.root--special .top-menu__root-item:hover .top-menu__root-item-icon {
    background-color: var(--special-background-color);
    color: var(--special-text-color);
    box-shadow: none;
  }
}