{"version":3,"sources":["toggle_switch.pcss",""],"names":[],"mappings":"AAAA,iBAAiB;;AAEjB;oFACoF;;AACpF;EACE,oBAAoB;AACtB;;AAEA;EACE,mBAAmB;EACnB,oBAAoB;EACpB,yDAAyD;AAa3D;;AAVI;MACE,2CAA2C;IAC7C;;AAIA;MACE,4CAA4C;IAC9C;;AAKF;IACE,YAAY;IACZ,mBAAmB;EACrB;;AAEA;IACE,SAAS;IACT,kBAAkB;EACpB;;AAGF;EACE,kBAAkB;EAClB,cAAc;EACd,gCAAgC;EAChC,+CAA+C;EAC/C,UAAU;EACV,gBAAgB;EAChB,qBAAqB;EACrB,eAAe;EACf,yBAAiB;UAAjB,iBAAiB;EACjB,8CAA8C;EAC9C,kFAAkF;EAClF,qDAAqD;EACrD,yDAAyD;EACzD,yBAAyB;EACzB,mDAAmD;EACnD,wBAAgB;UAAhB,gBAAgB;AAoBlB;;AAlBE;;IAEE,iBAAiB;EACnB;;AAEA;MAEI;IC/DN,mBAAA;IAAA,SAAA;IAAA,UAAA;IAAA,YAAA;IAAA,aAAA;IAAA,iBAAA;IAAA,YAAA;IAAA;ED+DgC;EAE9B;;AAEA;;AA7BF;IA8BI,gBAAgB;AAMpB;;IAJI;MACE,gBAAgB;IAClB;EACF;;AAGF;EACE,4CAA4C;EAC5C,wCAAwC;AAiB1C;;AAfE;;IAEE,4CAA4C;;IAE5C;6CACyC;EAK3C;;AAHE;MACE,8DAA8D;IAChE;;AAGF;IACE,8DAA8D;EAChE;;AAGF;EACE,sDAAsD;EACtD,sDAAsD;AAuBxD;;AArBE;IACE,4DAA4D;EAC9D;;AAEA;IACE,6DAA6D;EAC/D;;AAEA;IACE,qDAAqD;IACrD,SAAS;IACT,uCAAuC;EACzC;;AAEA;IACE,yBAAyB;EAC3B;;AAEA;IACE,2BAA2B;EAC7B;;AAGF;EACE,mBAAmB;EACnB,4CAA4C;EAC5C,wCAAwC;EACxC,yBAAyB;AA0B3B;;AAtBI;MACE,qCAAqC;IACvC;;AAGF;IACE,yCAAyC;IACzC,gBAAgB;EAMlB;;AAJE;;MAEE,qCAAqC;IACvC;;AAGF;IACE,6BAA6B;EAC/B;;AAEA;IACE,6BAA6B;EAC/B;;AAGF;EACE,aAAa;EACb,mBAAmB;EACnB,WAAW;EACX,YAAY;EACZ,gBAAgB;AAClB;;AAEA;EACE,cAAc;EACd,6BAA6B;EAC7B,yBAAyB;EACzB,8BAA8B;EAC9B,4BAA4B;EAC5B,aAAa;AACf;;AAEA;EACE,cAAc;EACd,8BAA8B;EAC9B,yBAAyB;EACzB,8BAA8B;EAC9B,wBAAwB;EACxB,aAAa;AACf;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,YAAY;EACZ,UAAU;EACV,UAAU;EACV,qCAAqC;EACrC,kFAAkF;EAClF,qDAAqD;EACrD,qEAAqE;EACrE,yDAAyD;EACzD,yBAAyB;EACzB,8BAA8B;EAC9B,2BAA2B;AAK7B;;AAHE;;AAfF;IAgBI,gBAAgB;AAEpB;EADE;;AAGF;EACE,kBAAkB;EAClB,oDAAoD;EACpD,gBAAgB;EAChB,8BAA8B;EAC9B,iBAAiB;AACnB;;AAEA;EACE,gCAAgC;EAChC,aAAa;EACb,oBAAoB;AACtB;;AAGE;IACE,mDAAmD;EACrD;;AAEA;IACE,gCAAgC;IAChC,+CAA+C;EACjD;;AAIA;IACE,4BAA4B;EAC9B;;AAGF;EACE,SAAS;EACT,kBAAkB;AACpB;;AAEA;EACE,YAAY;EACZ,mBAAmB;AACrB;;AAEA;EACE,2BAA2B;AAK7B;;AAHE;IACE,gBAAgB;EAClB","file":"toggle_switch.css","sourcesContent":["/* ToggleSwitch */\n\n/* Catalyst in dotcom applies a display: block to all web component elements. This\n** rule overrides it so the status label and toggle switch are laid out correctly. */\n.ToggleSwitch.ToggleSwitch {\n display: inline-flex;\n}\n\n.ToggleSwitch {\n align-items: center;\n display: inline-flex;\n gap: var(--yattho-controlStack-medium-gap-condensed, 8px);\n\n &:hover {\n & .ToggleSwitch-knob {\n background-color: var(--color-btn-hover-bg);\n }\n }\n\n &:active {\n & .ToggleSwitch-knob {\n background-color: var(--color-btn-active-bg);\n }\n }\n}\n\n.ToggleSwitch--checked {\n & .ToggleSwitch-statusOn {\n height: auto;\n visibility: visible;\n }\n\n & .ToggleSwitch-statusOff {\n height: 0;\n visibility: hidden;\n }\n}\n\n.ToggleSwitch-track {\n position: relative;\n display: block;\n width: var(--base-size-64, 64px);\n height: var(--yattho-control-medium-size, 32px);\n padding: 0;\n overflow: hidden;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n background-color: var(--color-switch-track-bg);\n border: var(--yattho-borderWidth-thin, 1px) solid var(--color-switch-track-border);\n border-radius: var(--yattho-borderRadius-medium, 6px);\n transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n transition-duration: 80ms;\n transition-property: background-color, border-color;\n appearance: none;\n\n &:focus,\n &:focus-visible {\n outline-offset: 0;\n }\n\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 44px;\n }\n }\n\n @media (prefers-reduced-motion) {\n transition: none;\n\n & * {\n transition: none;\n }\n }\n}\n\n.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {\n background-color: var(--color-canvas-subtle);\n border-color: var(--color-border-subtle);\n\n &:hover,\n &:active {\n background-color: var(--color-canvas-subtle);\n\n /* This is the most straightforward way of setting the knob's styles when the\n ** switch is both checked and disabled. */\n\n & .ToggleSwitch-knob {\n background-color: var(--color-switch-knob-checked-disabled-bg);\n }\n }\n\n & .ToggleSwitch-knob {\n background-color: var(--color-switch-knob-checked-disabled-bg);\n }\n}\n\n.ToggleSwitch-track[aria-checked='true'] {\n background-color: var(--color-switch-track-checked-bg);\n border-color: var(--color-switch-track-checked-border);\n\n &:hover {\n background-color: var(--color-switch-track-checked-hover-bg);\n }\n\n &:active {\n background-color: var(--color-switch-track-checked-active-bg);\n }\n\n & .ToggleSwitch-knob {\n background-color: var(--color-switch-knob-checked-bg);\n border: 0;\n transform: translateX(calc(100% + 1px));\n }\n\n & .ToggleSwitch-lineIcon {\n transform: translateX(0%);\n }\n\n & .ToggleSwitch-circleIcon {\n transform: translateX(100%);\n }\n}\n\n.ToggleSwitch-track[aria-disabled='true'] {\n cursor: not-allowed;\n background-color: var(--color-canvas-subtle);\n border-color: var(--color-border-subtle);\n transition-property: none;\n\n &:hover,\n &:active {\n & .ToggleSwitch-knob {\n background-color: var(--color-btn-bg);\n }\n }\n\n & .ToggleSwitch-knob {\n border-color: var(--color-border-default);\n box-shadow: none;\n\n &:hover,\n &:active {\n background-color: var(--color-btn-bg);\n }\n }\n\n & .ToggleSwitch-lineIcon {\n color: var(--color-fg-subtle);\n }\n\n & .ToggleSwitch-circleIcon {\n color: var(--color-fg-subtle);\n }\n}\n\n.ToggleSwitch-icons {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.ToggleSwitch-lineIcon {\n line-height: 0;\n color: var(--color-accent-fg);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(-100%);\n flex: 1 0 50%;\n}\n\n.ToggleSwitch-circleIcon {\n line-height: 0;\n color: var(--color-fg-default);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(0);\n flex: 1 0 50%;\n}\n\n.ToggleSwitch-knob {\n position: absolute;\n top: -1px;\n bottom: -1px;\n z-index: 1;\n width: 50%;\n background-color: var(--color-btn-bg);\n border: var(--yattho-borderWidth-thin, 1px) solid var(--color-switch-track-border);\n border-radius: var(--yattho-borderRadius-medium, 6px);\n box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);\n transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(-1px);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n\n.ToggleSwitch-status {\n position: relative;\n font-size: var(--yattho-text-body-size-medium, 14px);\n line-height: 1.5;\n color: var(--color-fg-default);\n text-align: right;\n}\n\n.ToggleSwitch-statusIcon {\n width: var(--base-size-16, 16px);\n display: flex;\n margin-top: 0.063rem;\n}\n\n.ToggleSwitch--small {\n & .ToggleSwitch-status {\n font-size: var(--yattho-text-body-size-small, 12px);\n }\n\n & .ToggleSwitch-track {\n width: var(--base-size-48, 48px);\n height: var(--yattho-control-xsmall-size, 24px);\n }\n}\n\n.ToggleSwitch--disabled {\n & .ToggleSwitch-status {\n color: var(--color-fg-muted);\n }\n}\n\n.ToggleSwitch-statusOn {\n height: 0;\n visibility: hidden;\n}\n\n.ToggleSwitch-statusOff {\n height: auto;\n visibility: visible;\n}\n\n.ToggleSwitch--statusAtEnd {\n flex-direction: row-reverse;\n\n & .ToggleSwitch-status {\n text-align: left;\n }\n}",null]}