import { IconButton } from '../../IconButton';
import { styled } from '../../styled';
import { actionsClassnames, focusModeButtonClassnames } from './constants';
export const Wrapper = styled.div `
  display: flex;
  grid-column: 3;
  grid-row: 1 / 4;
  gap: ${({ theme }) => theme.spacing(2)};

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    grid-column: 4;
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
export const MainActionsWrapper = styled.div `
  display: flex;
  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    &.${actionsClassnames.withCollapseOnLaptop} {
      display: none;
    }
  }
`;
export const SecondaryVisibleWrapper = styled('div') `
  display: flex;
  flex-wrap: nowrap;
  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    &.${actionsClassnames.withCollapseOnLaptop} {
      display: none;
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    gap: ${({ theme }) => theme.spacing(2)};
  }
`;
export const CollapsedActionsWrapper = styled.div `
  display: none;

  margin-left: auto;

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    &.${actionsClassnames.withCollapseOnLaptop} {
      display: flex;
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
export const ActionWrapper = styled.div `
  display: flex;
  flex-direction: row-reverse;
  gap: ${({ theme, $spacing }) => theme.spacing($spacing)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    gap: ${({ theme }) => theme.spacing(2)};
  }
`;
export const FocusModeButton = styled(IconButton) `
  display: none;

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    &.${focusModeButtonClassnames.isShowOnLaptop} {
      display: inline-flex;
    }
  }
    
  ${({ theme }) => theme.breakpoints.up('laptop')} {
    &.${focusModeButtonClassnames.isShowOnDesktop} {
      display: inline-flex;
    }
  }
`;
