import { styled } from '../../styled';
import { Tag } from '../../Tag';
import { RESERVED_CONTROL_BAR_SPACE } from '../constants';
export const Wrapper = styled.div `
  position: absolute;
  top: 0;
  right: 0;

  display: ${({ $isVisible }) => ($isVisible ? 'flex' : 'none')};
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;

  width: ${RESERVED_CONTROL_BAR_SPACE}px;
  height: 100%;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
export const StyledTag = styled(Tag) `
  position: absolute;
  z-index: 1;
  top: 0;

  min-width: 32px;

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