"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-scale-up.cssr");

const cssr_1 = require("../../../_utils/cssr"); // vars:
// --bezier
// --button-border-radius
// --button-box-shadow
// --button-color
// --button-width
// --button-width-pressed
// --height
// --offset
// --rail-border-radius
// --rail-color
// --rail-color-active
// --rail-height
// --rail-width
// --width
// --box-shadow-focus
// --loading-color
// --text-color


exports.default = cssr_1.cB('switch', `
 height: var(--height);
 min-width: var(--width);
 vertical-align: middle;
 user-select: none;
 display: inline-flex;
 outline: none;
 justify-content: center;
 align-items: center;
`, [cssr_1.cE('children-placeholder', `
 height: var(--rail-height);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 pointer-events: none;
 visibility: hidden;
 `), cssr_1.cE('rail-placeholder', `
 display: flex;
 flex-wrap: none;
 `), cssr_1.cE('button-placeholder', `
 width: calc(1.75 * var(--rail-height));
 height: var(--rail-height);
 `), cssr_1.cB('base-loading', `
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 font-size: calc(var(--button-width) - 4px);
 color: var(--loading-color);
 transition: color .3s var(--bezier);
 `, [fade_in_scale_up_cssr_1.default({
  originalTransform: 'translateX(-50%) translateY(-50%)'
})]), cssr_1.cE('checked, unchecked', `
 transition: color .3s var(--bezier);
 color: var(--text-color);
 box-sizing: border-box;
 position: absolute;
 white-space: nowrap;
 top: 0;
 bottom: 0;
 display: flex;
 align-items: center;
 `), cssr_1.cE('checked', `
 right: 0;
 padding-right: calc(1.25 * var(--rail-height) - var(--offset));
 `), cssr_1.cE('unchecked', `
 left: 0;
 justify-content: flex-end;
 padding-left: calc(1.25 * var(--rail-height) - var(--offset));
 `), cssr_1.c('&:focus', [cssr_1.cE('rail', `
 box-shadow: var(--box-shadow-focus);
 `)]), cssr_1.cM('round', [cssr_1.cE('rail', {
  borderRadius: 'calc(var(--rail-height) / 2)'
}, [cssr_1.cE('button', {
  borderRadius: 'calc(var(--button-height) / 2)'
})])]), cssr_1.cNotM('disabled', [cssr_1.cM('pressed', [cssr_1.cE('rail', [cssr_1.cE('button', {
  maxWidth: 'var(--button-width-pressed)'
})])]), cssr_1.cE('rail', [cssr_1.c('&:active', [cssr_1.cE('button', {
  maxWidth: 'var(--button-width-pressed)'
})])]), cssr_1.cM('active', [cssr_1.cM('pressed', [cssr_1.cE('rail', [cssr_1.cE('button', {
  left: 'calc(100% - var(--offset) - var(--button-width-pressed))'
})])]), cssr_1.cE('rail', [cssr_1.c('&:active', [cssr_1.cE('button', {
  left: 'calc(100% - var(--offset) - var(--button-width-pressed))'
})])])])]), cssr_1.cM('active', [cssr_1.cE('rail', [cssr_1.cE('button', {
  left: 'calc(100% - (var(--rail-height) + var(--button-width)) / 2)'
})])]), cssr_1.cE('rail', `
 overflow: hidden;
 height: var(--rail-height);
 min-width: var(--rail-width);
 border-radius: var(--rail-border-radius);
 cursor: pointer;
 position: relative;
 transition:
 background-color .3s var(--bezier),
 box-shadow .3s var(--bezier);
 background-color: var(--rail-color);
 `, [cssr_1.cE('button', `
 top: var(--offset);
 left: var(--offset);
 height: var(--button-width);
 width: var(--button-width-pressed);
 max-width: var(--button-width);
 border-radius: var(--button-border-radius);
 background-color: var(--button-color);
 box-shadow: var(--button-box-shadow);
 box-sizing: border-box;
 cursor: inherit;
 content: "";
 position: absolute;
 transition:
 background-color .3s var(--bezier),
 left .3s var(--bezier),
 opacity .3s var(--bezier),
 max-width .3s var(--bezier),
 box-shadow .3s var(--bezier);
 `)]), cssr_1.cM('active', [cssr_1.cE('rail', {
  backgroundColor: 'var(--rail-color-active)'
})]), cssr_1.cM('disabled', [cssr_1.cE('rail', `
 cursor: not-allowed;
 opacity: .5;
 `)])]);