@braineet/ui/dist/esm/components/checkbox/item/styles.js

Braineet design system

/* stylelint-disable property-no-vendor-prefix */

import styled, { css } from 'styled-components';
import { borderRadius } from '../../../utils';
import Box from '../../box';
import Text from '../../text';
export var StyledLabel = styled(Box).withConfig({
  displayName: "styles__StyledLabel",
  componentId: "sc-10wyjmo-0"
})(["position:relative;display:inline-flex;align-items:center;flex-grow:0;padding:8px;box-sizing:border-box;cursor:", ";", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (p) {
  return !p.readOnly ? 'pointer' : 'default';
}, borderRadius(4), function (props) {
  return props.disabled && DisabledLabel;
}, function (p) {
  return !p.readOnly && !p.checked && css(["&:hover{background-color:", ";}"], function (props) {
    return props.theme.utils.lighten('black', 0.1);
  });
}, borderRadius(4), function (p) {
  return p.style;
}, function (props) {
  return props.checked && CheckedToggle;
}, function (props) {
  return props.disabled && DisabledToggle;
}, function (props) {
  return props.error && ErrorToggle;
}, function (p) {
  return p.stylesProps;
});
export var DefaultToggleInput = styled.input.withConfig({
  displayName: "styles__DefaultToggleInput",
  componentId: "sc-10wyjmo-1"
})(["position:relative;display:flex;align-items:center;justify-content:center;appearance:none;flex-shrink:0;cursor:pointer;"]);
export var StyledText = styled(Text).withConfig({
  displayName: "styles__StyledText",
  componentId: "sc-10wyjmo-2"
})(["display:block;line-height:1;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow-wrap:break-word;", ""], function (props) {
  return props.error && ErrorText;
});

/**
 * Styles Label
 */
var DisabledLabel = css(["cursor:not-allowed;"]);

/**
 * Styles Toggle
 */
var CheckedToggle = css(["background-color:", ";"], function (props) {
  return props.theme.colors.brand10;
});
var DisabledToggle = css(["opacity:", ";&:hover{background-color:transparent;}"], function (props) {
  return props.opacity || '0.24';
});
var ErrorToggle = css(["background-color:", ";"], function (props) {
  return props.theme.colors.error10;
});
var ErrorText = css(["color:", ";"], function (props) {
  return props.theme.colors.error50;
});
export var CheckboxBtn = styled.span.withConfig({
  displayName: "styles__CheckboxBtn",
  componentId: "sc-10wyjmo-3"
})(["position:absolute;width:1rem;height:1rem;opacity:0;transform:translateY(4px);transition-property:opacity,transform;transition-timing-function:ease;transition-duration:0.3s;"]);
export var CheckboxInput = styled(DefaultToggleInput).withConfig({
  displayName: "styles__CheckboxInput",
  componentId: "sc-10wyjmo-4"
})(["border:1px solid ", ";width:16px;height:16px;border-radius:4px;padding:0px;margin:0px;transition:border-color 100ms ease 0s,background-color 100ms ease 0s;&:checked{border:1px solid ", ";background-color:", ";& + span{opacity:1;transform:translateY(0);}}&:focus:not(:checked){border:1px solid ", ";}&:focus:has(:checked){border:1px solid ", ";}&:focus:not(:disabled){outline-offset:2px;outline:2px solid ", ";}&:focus:not(:focus-visible){outline:none;}"], function (p) {
  return p.theme.colors.black;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return p.theme.colors.black;
}, function (p) {
  return p.theme.colors.brand;
}, function (p) {
  return p.theme.colors.brand;
});