@square/maker/components/Toggle/styles.css

📚 Maker Design System by Square

.\1F4DA 4-7-03b9Gc{position:relative;display:inline-block;line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;--color-black-90:rgba(0,0,0,0.9);--color-black-30:rgba(0,0,0,0.3);--color-black-15:rgba(0,0,0,0.15);--color-black-05:rgba(0,0,0,0.05);--color-error:#ce3217;--color-white:#fff;--transition:0.2s ease;--t-height:20px;--t-width:calc(var(--t-height)*2);--t-border:1px;--tb-dim:14px;--tb-inset:3px;--tb-top:calc(var(--tb-inset) - var(--t-border));--tb-left-unchecked:var(--tb-inset);--tb-left-checked:calc(var(--t-width) - var(--tb-dim) - var(--tb-inset) - var(--t-border)*2);--tb-background-color:var(--color-black-05)}.\1F4DA 4-7-01-eX4{position:absolute;opacity:0}.\1F4DA 4-7-0Mb9so{position:absolute;top:var(--tb-top);left:var(--tb-left-unchecked);box-sizing:border-box;width:var(--tb-dim);height:var(--tb-dim);border-radius:inherit;transition:left var(--transition),background-color var(--transition)}.\1F4DA 4-7-0Mb9so:after{display:block;width:100%;height:100%;background-color:var(--tb-background-color);border-radius:inherit;transition:transform var(--transition),background-color var(--transition);content:""}.\1F4DA 4-7-02uz08{position:relative;display:inline-block;box-sizing:border-box;width:var(--t-width);height:var(--t-height);vertical-align:middle;border:var(--t-border) solid;border-radius:calc(var(--t-width)/2);transition:background-color var(--transition) border-color var(--transition)}.\1F4DA 4-7-01-eX4:focus+.\1F4DA 4-7-02uz08{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color}.\1F4DA 4-7-01-eX4:checked+.\1F4DA 4-7-02uz08 .\1F4DA 4-7-0Mb9so{left:var(--tb-left-checked);--tb-background-color:var(--color-white)}.\1F4DA 4-7-01-eX4:disabled+.\1F4DA 4-7-02uz08{border-color:var(--color-black-05)}.\1F4DA 4-7-01-eX4:disabled:not(:checked)+.\1F4DA 4-7-02uz08{background-color:var(--color-black-05);--tb-background-color:var(--color-black-15)}.\1F4DA 4-7-01-eX4:disabled:checked+.\1F4DA 4-7-02uz08{background-color:var(--color-black-15)}.\1F4DA 4-7-01-eX4:invalid+.\1F4DA 4-7-02uz08{border-color:var(--color-error)}.\1F4DA 4-7-01-eX4:invalid:not(:checked)+.\1F4DA 4-7-02uz08{background-color:var(--color-white);--tb-background-color:var(--color-error)}.\1F4DA 4-7-01-eX4:invalid:checked+.\1F4DA 4-7-02uz08{background-color:var(--color-error)}.\1F4DA 4-7-01-eX4:not(:disabled):not(:invalid)+.\1F4DA 4-7-02uz08{border-color:var(--color-black-30)}.\1F4DA 4-7-01-eX4:not(:disabled):not(:invalid):not(:checked)+.\1F4DA 4-7-02uz08{background-color:var(--color-white);--tb-background-color:var(--color-black-30)}.\1F4DA 4-7-01-eX4:not(:disabled):not(:invalid):not(:checked)+.\1F4DA 4-7-02uz08:active,.\1F4DA 4-7-01-eX4:not(:disabled):not(:invalid):not(:checked)+.\1F4DA 4-7-02uz08:focus,.\1F4DA 4-7-01-eX4:not(:disabled):not(:invalid):not(:checked)+.\1F4DA 4-7-02uz08:hover{border-color:var(--color-black-90);--tb-background-color:var(--color-black-90)}.\1F4DA 4-7-01-eX4:not(:disabled):not(:invalid):checked+.\1F4DA 4-7-02uz08{background-color:var(--color-black-90);border-color:var(--color-black-90)}