import styled from '@emotion/styled';
import { FloatingOverlay } from '@floating-ui/react';

import { mediaQuery } from '../../foundation/Media';

export const FloatingOverlayStyled = styled(FloatingOverlay)`
  backdrop-filter: blur(4px);
  z-index: ${({ theme }) => theme.layerIndexes.dialog};

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
`;

export const FloatingContent = styled.div`
  @media (${mediaQuery.tabletDeviceAndDown}) {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
`;