import { styled } from '../../styled';
import { HEADER_HEIGHT_DESKTOP, HEADER_HEIGHT_LAPTOP } from '../constants';
export const Wrapper = styled('div') `
  display: flex;
  justify-content: center;

  width: 100%;

  background-color: ${({ theme }) => theme.palette.background.body};
`;
export const DecorativeHeaderBackground = styled.div `
  position: absolute;

  /* Header находится над декоративным элементом */
  z-index: 0;
  left: 0;

  width: 100%;
  height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : HEADER_HEIGHT_DESKTOP)};

  background-color: ${({ theme }) => theme.palette.background.default};
  border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};

  transition: ${({ theme }) => {
    return theme.transitions.create(['height'], {
        duration: theme.transitions.duration.complex,
    });
}};

 ${({ theme }) => theme.breakpoints.down('laptop')} {
    height: ${({ $isFocusedMode }) => ($isFocusedMode ? 0 : HEADER_HEIGHT_LAPTOP)}
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
