{"version":3,"file":"TogglerStyles.cjs","names":["_styles","require","_styledComponents","_interopRequireDefault","_typography","StyledSwitch","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","state","getColor","isOnFill","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled'}, props.theme)};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n\r\n  label:first-of-type span.semantic, &[aria-pressed='true'] label:first-of-type span {\r\n    border: none;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not([aria-pressed='true']) label:first-of-type span {\r\n    &.semantic:before {\r\n        background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'critical' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    &.semantic:before {\r\n        background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'positive' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &:before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:hover label:first-of-type span {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'primary' }, props.theme)};\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'positive' }, props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &[aria-pressed='true']:active label:first-of-type span {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'primary' }, props.theme)};\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'positive' }, props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &[aria-pressed='true'] label:first-of-type span {\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n\r\n    &:before {\r\n      -webkit-transform: translateX(20px);\r\n      -ms-transform: translateX(20px);\r\n      transform: translateX(20px);\r\n    }\r\n  }\r\n\r\n  &:not([aria-pressed='true']).disabled label:first-of-type span {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'disabled' }, props.theme)} !important;\r\n    cursor: not-allowed;\r\n\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)} !important;\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)} !important;\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n\r\n  &:not([aria-pressed='true']) label:first-of-type span {\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'critical' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled label:first-of-type span {\r\n    border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)} !important;\r\n  }\r\n\r\n  &:not([aria-pressed='true']):hover label:first-of-type span {\r\n\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'hover' }, props.theme)};\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant:'critical', state:'hover' }, props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not([aria-pressed='true']):active label:first-of-type span {\r\n\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'active' }, props.theme)};\r\n    &.semantic {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant:'critical', state: 'active' }, props.theme)};\r\n    }\r\n\r\n    &:not(.semantic):before {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'active', defaultVariant: 'default' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:not(.disabled).focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  border: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'default' }, props.theme)};\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'default' }, props.theme)};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}