.root {
  position: absolute;
  z-index: var(--z-middle-header);
  top: 3.5rem;
  left: 0;

  width: 100%;

  // In case if there are no children, we need to have a shadow
  &::before {
    pointer-events: none;
    content: '';

    position: absolute;
    z-index: -100; // Hide behind the children
    top: -2px;
    right: 0;
    left: 0;

    height: 2px;

    box-shadow: 0 2px 2px var(--color-light-shadow);
  }

  &_withRightColumnAnimation {
    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
    transition: width var(--layer-transition);
  }

  /* stylelint-disable-next-line plugin/selector-tag-no-without-class */
  > div:last-child {
    box-shadow: 0 2px 2px var(--color-light-shadow);
  }

  @media (min-width: 1276px) {
    :global(#Main.right-column-open) & {
      width: calc(100% - var(--right-column-width));
    }
  }
}