import styled from 'styled-components';
import css from '@styled-system/css';
import { BoxBlock, TextBlock } from "../../../modules";
import { colors, AlignCenter } from "../../../globalStyled";
export const CheckboxWrapperDiv = styled(BoxBlock) `
  position: relative;
  min-width: 20px;

  input {
    opacity: 0;
    position: absolute;
    left: -999999px;
  }
`;
export const CheckboxWrapperInnerDiv = styled(BoxBlock) `
  ${AlignCenter}
  flex-wrap: nowrap;
`;
export const CheckboxText = styled(TextBlock) ``;
export const CheckboxInfoText = styled(TextBlock) `
  color: ${colors.textSecondary};

  && {
    ${css({ mt: 2, mr: 0, mb: 0, ml: 9 })}
    flex: 1 1 100%;
  }
`;
export const CheckboxTextBlockDiv = styled(TextBlock) `
  cursor: pointer;
  ${({ $disabled }) => ($disabled ? `color:${colors.textDisabled};` : '')}
  ${css({ ml: 3 })} /* @media screen and (min-width: 1920px) {
    width: 70%;
  } */
`;
export const CheckboxBlockDiv = styled(BoxBlock) `
  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};

  & > svg path {
    ${({ $disabled = false }) => ($disabled ? `fill:${colors.iconsDisabled};` : '')}
  }

  height: 24px;
  width: 24px;
  flex: 0 0 24px;
`;
export const SwitchBlockDiv = styled(BoxBlock) `
  cursor: pointer;
  height: 26px;
  width: 44px;
  flex: 0 0 44px;
`;
