.top-menu {
  --item-gap: calc(var(--grid-gap) / 4);
  --root-item-gap: 8px;
  background: hsl(0, 0%, 100%);
  box-shadow: 0 14px 80px 0 hsla(0, 0%, 0%, 0.05);
}

.body .container .top-menu__root-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  border-top: 2px solid var(--border-color);
  list-style-type: none;
}

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

.top-menu__root-item--selected .top-menu__root-item__content:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: calc(var(--grid-gap) / 10);
  display: block;
  height: 3px;
  background: var(--primary-color);
  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__content:after,
.top-menu__root-item--selected:focus-within .top-menu__root-item__content:after,
.top-menu__root-item--selected.top-menu__root-item--open .top-menu__root-item__content: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__content {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 63px;
  padding: 0 calc(var(--root-item-gap) / 2);
}

.top-menu__root-item-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 63px;
  font-size: calc(15rem/var(--initial-font-multiplier));
  font-weight: 600;
}

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

.top-menu__root-item-icon {
  position: relative;
  bottom: -2px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 11px;
  min-height: 63px;
  margin-left: 8px;
  padding: 0;
  color: var(--text-color);
  background: none;
  border: none;
  transition: transform 0.2s;
}

.top-menu__root-item-icon svg {
  width: 100%;
}

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

.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__items--no-animation {
  animation: none;
}

.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 .body .container .top-menu__root-items {
  border-top: 2px solid 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) {
  .top-menu__root-item--open,
  .top-menu__root-item:focus-within {
    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--open .top-menu__root-item-link {
    border: none;
  }

  .top-menu__root-item--open .top-menu__root-item-icon {
    transform: rotate(-180deg);
  }

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

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

  .top-menu__item-link:hover,
  .top-menu__child-item-link:hover,
  .top-menu__item-link:focus-visible,
  .top-menu__child-item-link:focus-visible {
    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,
  :root.root--special .top-menu__root-item:focus-visible,
  :root.root--special .top-menu__root-item:focus-visible .top-menu__root-item-label,
  :root.root--special .top-menu__root-item:focus-visible .top-menu__root-item-icon {
    background-color: var(--special-background-color);
    color: var(--special-text-color);
    box-shadow: none;
  }
}

@media screen and (max-width: 1087px) {
  .top-menu__root-item-icon {
    display: none;
  }
}