.typography{margin:0;padding:.5em 0 .4em}.typography.primary{color:var(--primary-500)}.typography.secondary{color:var(--secondary-500)}.typography.tertiary{color:var(--tertiary-500)}.typography.active{color:var(--active-500)}.typography.alert{color:var(--alert-500)}.typography.warning{color:var(--warning-500)}.typography.info{color:var(--info-500)}.typography.recommended-width{max-width:70ch}.typography.code-family{font-family:monospace}.typography.no-padding{padding:0}.typography.nowrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.typography.nowrap-max-lines{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.typography.nowrap-max-lines-2{-webkit-line-clamp:2;line-clamp:2}.typography.nowrap-max-lines-3{-webkit-line-clamp:3;line-clamp:3}.typography.nowrap-max-lines-4{-webkit-line-clamp:4;line-clamp:4}.typography.nowrap-max-lines-5{-webkit-line-clamp:5;line-clamp:5}.typography.hero{font-size:var(--typography-size-hero);line-height:var(--typography-line-height-header);font-weight:700}.typography.header1{font-size:var(--typography-size-header1);line-height:var(--typography-line-height-header);font-weight:700}.typography.header2{font-size:var(--typography-size-header2);line-height:var(--typography-line-height-header);font-weight:700}.typography.header3{font-size:var(--typography-size-header3);line-height:var(--typography-line-height-header);font-weight:700}.typography.header4{font-size:var(--typography-size-header4);line-height:var(--typography-line-height-header);font-weight:700}.typography.body{font-size:var(--typography-size-body);line-height:var(--typography-line-height-common);font-weight:400}.typography.label{font-size:var(--typography-size-label);line-height:var(--typography-line-height-common);font-weight:400}.typography.small{font-size:var(--typography-size-small);line-height:var(--typography-line-height-common);font-weight:400}.typography.bold{font-weight:700}.typography.regular{font-weight:400}.typography.light{font-weight:300}
.checkbox{background:var(--background-paper);border-radius:40%;outline:1px solid;width:1em;height:1em;margin:2px;transition:all .3s;display:flex;position:relative}.checkbox .checkbox-input{cursor:pointer;opacity:0;z-index:2;width:100%;height:100%;position:absolute;top:0;left:0}.checkbox.size-small{font-size:1em}.checkbox.size-regular{font-size:1.2em}.checkbox.size-large{font-size:1.4em}.checkbox-fill{border-radius:inherit;place-content:center;place-items:center;width:0;height:0;margin:auto;transition:all .2s ease-out;display:grid;position:relative;overflow:hidden}.checkbox-fill .checkbox-icon{z-index:1;opacity:0;font-size:.7em;transition:opacity .3s}.checkbox-container{--color:var(--neutral-800);--color-icon:var(--neutral-50);--color-hover:hsl(from var(--neutral-800) h s l / 50%);grid-auto-columns:auto 1fr;grid-auto-flow:column;align-items:center;gap:.5em;width:fit-content;display:grid}.checkbox-container .checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;width:100%}.checkbox-container .checkbox{color:var(--color)}.checkbox-container .checkbox.is-checked .checkbox-fill{background:var(--color);width:100%;height:100%;color:var(--color-icon)}.checkbox-container .checkbox.is-checked .checkbox-icon{opacity:1}.checkbox-container .checkbox:hover{box-shadow:0 0 0 .3em var(--color-hover)}.checkbox-container:has(.checkbox-label:hover) .checkbox{box-shadow:0 0 0 .3em var(--color-hover)}.checkbox-container:has(.checkbox-label:hover) .checkbox .checkbox-fill{background:var(--color-hover);width:20%;height:20%;color:var(--color-icon);border-radius:20%}.checkbox-container:has(.checkbox-label:hover) .checkbox.is-checked .checkbox-fill{border-radius:inherit;background:var(--color);width:100%;height:100%}.checkbox-container .checkbox:hover .checkbox-fill{background:var(--color-hover);width:20%;height:20%;color:var(--color-icon);border-radius:20%}.checkbox-container .checkbox:hover.is-checked .checkbox-fill{border-radius:inherit;background:var(--color);width:100%;height:100%}.checkbox-container .checkbox:focus{box-shadow:0 0 0 .3em var(--color-hover)}.checkbox-container:has(.checkbox-input:focus) .checkbox{box-shadow:0 0 0 .3em var(--color-hover)}.checkbox-container:has(.checkbox-label:focus) .checkbox{box-shadow:0 0 0 .3em var(--color-hover)}.checkbox-container.color-primary{--color:var(--primary-500);--color-icon:var(--primary-50);--color-hover:hsl(from var(--primary-500) h s l / 50%)}.checkbox-container.color-secondary{--color:var(--secondary-500);--color-icon:var(--secondary-50);--color-hover:hsl(from var(--secondary-500) h s l / 50%)}.checkbox-container.color-tertiary{--color:var(--tertiary-500);--color-icon:var(--tertiary-50);--color-hover:hsl(from var(--tertiary-500) h s l / 50%)}.checkbox-container.color-active{--color:var(--active-500);--color-icon:var(--active-50);--color-hover:hsl(from var(--active-500) h s l / 50%)}.checkbox-container.color-warning{--color:var(--warning-500);--color-icon:var(--warning-50);--color-hover:hsl(from var(--warning-500) h s l / 50%)}.checkbox-container.color-alert{--color:var(--alert-500);--color-icon:var(--alert-50);--color-hover:hsl(from var(--alert-500) h s l / 50%)}.checkbox-container.color-info{--color:var(--info-500);--color-icon:var(--info-50);--color-hover:hsl(from var(--info-500) h s l / 50%)}
.ripple{border-radius:inherit;z-index:1;display:block;position:absolute;inset:0;overflow:hidden}.ripple .ripple-effect{pointer-events:none;opacity:.4;border-radius:50%;width:0;height:0;animation:infinite ripple-effect;position:absolute;transform:translate(-50%,-50%)}@keyframes ripple-effect{to{opacity:0;filter:blur(5px);width:300px;height:300px}}
.smart-table-container{border:0 solid var(--primary-500);border-radius:5px;width:100%;height:100%;margin:auto;overflow:auto}.smart-table{border-collapse:collapse;width:100%;position:relative}.smart-table.layout-fixed{table-layout:fixed}.smart-table.layout-scrollable{table-layout:auto}.smart-table thead{z-index:10;position:sticky;top:0;box-shadow:0 3px 5px #0003,0 1px 10px #0000001f}.smart-table thead tr{background:var(--primary-500);color:var(--primary-50);transition:all .3s}.smart-table tbody tr{box-shadow:inset 0 0 0 0 var(--primary-500);transition:box-shadow .3s}.smart-table tbody tr.row-selected,.smart-table tbody tr:hover{background:var(--background-paper)}.smart-table tbody tr.row-selected{box-shadow:inset 10px 0 0 -5px var(--primary-500)}.smart-table tbody tr:not(:last-child){border-bottom:1px solid var(--border)}.smart-table th{-webkit-user-select:none;user-select:none;padding:.8em 1.2em}.smart-table th.sort-on-click{cursor:pointer}.smart-table th .sort-icon{width:1em;display:block}.smart-table th svg{animation:.3s fadeIn}.smart-table th path{transition:all .3s}.smart-table th:first-child{padding-left:2em}.smart-table th:last-child{padding-right:2em}.smart-table td{padding:.6em 1em;transition:all .3s}.smart-table td:first-child{padding-left:2em}.smart-table td:last-child{padding-right:2em}
.form-field{grid-auto-columns:auto;gap:.5em;transition:all .2s;display:grid}.form-field .field-content{grid-template-columns:auto 1fr auto;align-items:center;display:grid}.form-field .field-left-icon,.form-field .field-right-icon{font-size:1em}.form-field .field-left-icon{margin-right:1em}.form-field .field-right-icon{margin-left:1em}.form-field .field-message{grid-auto-flow:column;justify-content:start;align-items:center;gap:5px;display:grid}.form-field.variant-content-border .field-content{border:1px solid var(--border);background:var(--background);border-radius:4px;padding:1em}.form-field.variant-content-line .field-content{border-bottom:1px solid;padding:.5em 0}.form-field.variant-full-border{border:1px solid var(--border);background:var(--background);border-radius:4px;padding:.5em 0}.form-field.variant-full-border .field-label,.form-field.variant-full-border .field-content,.form-field.variant-full-border .field-message{padding:0 1em}.form-field.variant-inline{grid-auto-flow:column;align-items:center;padding:.5em 0}.form-field.variant-inline .field-label{width:auto}.form-field.error{color:var(--alert-500);border-color:var(--alert-500)}.form-field.focus{color:var(--info-500);border-color:var(--info-500)}:is(.form-field.error,.form-field.focus) .field-left-icon,:is(.form-field.error,.form-field.focus) .field-right-icon,:is(.form-field.error,.form-field.focus) .field-children{color:var(--foreground);border-color:var(--foreground)}.form-field .field-children>*{width:100%}
.custom-line{--color:attr(data-color, "currentColor");--size:attr(data-size, 1px);--spacing:attr(data-spacing, 1px);--dashSize:attr(data-dash-size, 1px)}.custom-line.horizontal,.custom-line.vertical{background:var(--color);border-radius:100px;display:inline-block}.custom-line.horizontal{width:100%;height:var(--size)}.custom-line.horizontal.dotted{background:radial-gradient(calc(var(--size) / 2) calc(var(--size) / 2), var(--color) 100%, transparent) 0 0 / calc(var(--spacing) + var(--size)) 100%}.custom-line.horizontal.dashed{background:repeating-linear-gradient(90deg, var(--color), var(--color) var(--dashSize), transparent var(--dashSize), transparent calc(var(--spacing) + var(--dashSize)))}.custom-line.vertical{height:100%;width:var(--size)}.custom-line.vertical.dotted{background:radial-gradient(calc(var(--size) / 2) calc(var(--size) / 2), var(--color) 100%, transparent) 0 0 / 100% calc(var(--spacing) + var(--size))}.custom-line.vertical.dashed{background:repeating-linear-gradient(0deg, var(--color), var(--color) var(--dashSize), transparent var(--dashSize), transparent calc(var(--spacing) + var(--dashSize)))}
.input-slider{grid-template-columns:1fr 50px;align-items:center;gap:10px;display:grid}.input-slider .slider{appearance:none;align-items:center;display:grid}.input-slider .slider:focus{outline:none}.input-slider .slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--primary-500);width:20px;height:20px;box-shadow:0 0 0 0 var(--neutral-500);cursor:pointer;border-radius:1em;margin-top:-8px;transition:all .3s}.input-slider .slider::-webkit-slider-runnable-track{background:hsl(from var(--primary-200) h s l / 50%);border-radius:1em;height:4px;transition:all .3s}:is(.input-slider .slider:focus,.input-slider .slider:hover)::-webkit-slider-thumb{background:var(--primary-500);box-shadow:0 0 0 6px hsl(from var(--primary-500) h s l / 50%);cursor:grab}.input-slider .slider:active::-webkit-slider-thumb{box-shadow:0 0 0 12px hsl(from var(--primary-500) h s l / 31%);cursor:grabbing}.input-slider .slider:focus::-webkit-slider-runnable-track{background:var(--primary-300)}.input-slider:has(.slider-number:focus) .slider::-webkit-slider-thumb{background:var(--primary-500);box-shadow:0 0 0 6px hsl(from var(--primary-500) h s l / 31%)}.input-slider:has(.slider-number:hover) .slider::-webkit-slider-thumb{background:var(--primary-500);box-shadow:0 0 0 6px hsl(from var(--primary-500) h s l / 31%)}.input-slider .slider-number{text-align:center;font-size:var(--typography-size-label);appearance:none;width:100%;color:inherit;border:1px solid;border-radius:5px;padding:4px 8px;font-weight:700;transition:all .3s}.input-slider .slider-number::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-slider .slider-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-slider.is-focus .slider-number{color:var(--primary-500)}
.modal{z-index:1001;pointer-events:none;position:fixed}.modal-content{background:var(--background-paper);pointer-events:initial}.modal-content.animation-fade-down{animation:.2s fadeInDown}.modal-content.animation-fade-down.modal-close{opacity:0;animation:.2s fadeOutUp;transform:translateY(-10px)}.modal-content.animation-bounce{animation:.5s bounceIn}.modal-content.animation-bounce.modal-close{opacity:0;animation:.5s bounceOut;transform:scale3d(.3,.3,.3)}.modal-backdrop{z-index:1000;width:100%;height:100%;animation:.5s cubic-bezier(.215,.61,.355,1) backdropOpen;position:fixed;top:0;left:0}.modal-backdrop.backdrop-close{opacity:0;animation:.5s cubic-bezier(.215,.61,.355,1) backdropClose;transform:translateY(-10px)}@keyframes backdropOpen{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes backdropClose{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
.tooltip{color:var(--foreground);font-size:var(--typography-size-small);pointer-events:none;border:1px solid;border-radius:5px;padding:.5em 1em;line-height:1em;display:block}.tooltip:before{content:"";background:var(--background-paper);z-index:1;border-top:1px solid #0000;border-left:1px solid #0000;border-right:1px solid var(--foreground);border-bottom:1px solid var(--foreground);border-radius:0 0 3px;width:10px;height:10px;display:block;position:absolute}.tooltip.left{animation:.25s ease-out fadeInRight}.tooltip.left.close-animation{opacity:0;animation:.25s ease-out fadeOutLeft;transform:translate(-10px)}.tooltip.left:before{top:50%;left:100%;transform:translate(-50%,-50%)rotate(-45deg)}.tooltip.right{animation:.25s ease-out fadeInLeft}.tooltip.right.close-animation{opacity:0;animation:.25s ease-out fadeOutRight;transform:translate(10px)}.tooltip.right:before{top:50%;right:100%;transform:translate(50%,-50%)rotate(135deg)}.tooltip.top{animation:.25s ease-out fadeInDown}.tooltip.top.close-animation{opacity:0;animation:.25s ease-out fadeOutUp;transform:translateY(-10px)}.tooltip.top:before{top:100%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}.tooltip.bottom{animation:.25s ease-out fadeInUp}.tooltip.bottom.close-animation{opacity:0;animation:.25s ease-out fadeOutDown;transform:translateY(10px)}.tooltip.bottom:before{bottom:100%;left:50%;transform:translate(-50%,50%)rotate(-135deg)}
.button{--button-blur:2px;--color:var(--neutral-800);--solid-background:var(--neutral-900);--solid-text:var(--neutral-50);--solid-hover-background:var(--neutral-800);--solid-active-background:var(--neutral-900);--flat-background:hsl(from var(--neutral-100) h s l / 80%);--flat-hover-background:var(--neutral-50);--flat-active-background:var(--neutral-100);--outlined-hover-background:hsl(from var(--neutral-100) h s l / 20%);--outlined-active-background:hsl(from var(--neutral-100) h s l / 50%);--text-hover-background:hsl(from var(--neutral-100) h s l / 20%);--text-active-background:hsl(from var(--neutral-100) h s l / 50%);--shadow-color:hsl(from var(--neutral-800) h s l / 20%);--focus-background:hsl(from var(--neutral-100) h s l / 20%);width:auto;font-weight:700;font-size:var(--typography-size-label);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.5em;outline:none;flex-direction:row;justify-content:center;align-items:center;gap:.625em;padding:.625em 2.1875em;transition:all .15s;display:flex}.button.icon{padding:.625em}.button.full{width:100%}.button.no-wrap{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.button.size-small{font-size:var(--typography-size-small)}.button.size-regular{font-size:var(--typography-size-label)}.button.size-large{font-size:var(--typography-size-body)}.button.radius-none{border-radius:0}.button.radius-small{border-radius:.25em}.button.radius-medium{border-radius:.5em}.button.radius-large{border-radius:1em}.button.radius-full{border-radius:100rem}.button:not(:disabled):hover,.button:not(:disabled):active,.button:not(:disabled):focus-visible{-webkit-backdrop-filter:blur(var(--button-blur));backdrop-filter:blur(var(--button-blur))}.button:not(:disabled):hover{box-shadow:0 1.4em .5em -1em hsl(from var(--black) h s l / 20%), 0 .7em 1em -.5em hsl(from var(--black) h s l / 20%);transform:scale(1.01)}.button:not(:disabled):active{box-shadow:0 .3em .4em -.2em hsl(from var(--black) h s l / 20%), 0 .2em .8em -.1em hsl(from var(--black) h s l / 20%);transform:scale(.98)}.button{color:var(--color)}.button .ripple-effect{background:var(--color)}.button.solid{background:var(--solid-background);color:var(--solid-text);-webkit-backdrop-filter:blur(var(--button-blur));backdrop-filter:blur(var(--button-blur))}.button.solid .ripple-effect{background:var(--solid-text)}.button.solid:focus-visible{box-shadow:0 0 0 .3125em var(--shadow-color);background:var(--solid-background)}.button.solid:hover{background:var(--solid-hover-background)}.button.solid:active{background:var(--solid-active-background)}.button.flat{background:var(--flat-background);-webkit-backdrop-filter:blur(var(--button-blur));backdrop-filter:blur(var(--button-blur))}.button.flat:hover{background:var(--flat-hover-background)}.button.flat:active{background:var(--flat-active-background)}.button.outlined{background:0 0;border:1px solid}.button.outlined:hover{background:var(--outlined-hover-background)}.button.outlined:active{background:var(--outlined-active-background)}.button.text{background:0 0}.button.text:hover{background:var(--text-hover-background)}.button.text:active{background:var(--text-active-background)}.button:focus-visible{box-shadow:0 0 0 .3125em var(--shadow-color);background:var(--focus-background)}.button.primary{--color:var(--primary-500);--solid-background:var(--primary-500);--solid-text:var(--primary-50);--solid-hover-background:var(--primary-400);--solid-active-background:var(--primary-600);--flat-background:hsl(from var(--primary-100) h s l / 80%);--flat-hover-background:var(--primary-50);--flat-active-background:var(--primary-100);--outlined-hover-background:hsl(from var(--primary-100) h s l / 20%);--outlined-active-background:hsl(from var(--primary-100) h s l / 50%);--text-hover-background:hsl(from var(--primary-100) h s l / 20%);--text-active-background:hsl(from var(--primary-100) h s l / 50%);--shadow-color:hsl(from var(--primary-500) h s l / 20%);--focus-background:hsl(from var(--primary-100) h s l / 20%)}.button.secondary{--color:var(--secondary-500);--solid-background:var(--secondary-500);--solid-text:var(--secondary-50);--solid-hover-background:var(--secondary-400);--solid-active-background:var(--secondary-600);--flat-background:hsl(from var(--secondary-100) h s l / 80%);--flat-hover-background:var(--secondary-50);--flat-active-background:var(--secondary-100);--outlined-hover-background:hsl(from var(--secondary-100) h s l / 20%);--outlined-active-background:hsl(from var(--secondary-100) h s l / 50%);--text-hover-background:hsl(from var(--secondary-100) h s l / 20%);--text-active-background:hsl(from var(--secondary-100) h s l / 50%);--shadow-color:hsl(from var(--secondary-500) h s l / 20%);--focus-background:hsl(from var(--secondary-100) h s l / 20%)}.button.tertiary{--color:var(--tertiary-500);--solid-background:var(--tertiary-500);--solid-text:var(--tertiary-50);--solid-hover-background:var(--tertiary-400);--solid-active-background:var(--tertiary-600);--flat-background:hsl(from var(--tertiary-100) h s l / 80%);--flat-hover-background:var(--tertiary-50);--flat-active-background:var(--tertiary-100);--outlined-hover-background:hsl(from var(--tertiary-100) h s l / 20%);--outlined-active-background:hsl(from var(--tertiary-100) h s l / 50%);--text-hover-background:hsl(from var(--tertiary-100) h s l / 20%);--text-active-background:hsl(from var(--tertiary-100) h s l / 50%);--shadow-color:hsl(from var(--tertiary-500) h s l / 20%);--focus-background:hsl(from var(--tertiary-100) h s l / 20%)}.button.active{--color:var(--active-500);--solid-background:var(--active-500);--solid-text:var(--active-50);--solid-hover-background:var(--active-400);--solid-active-background:var(--active-600);--flat-background:hsl(from var(--active-100) h s l / 80%);--flat-hover-background:var(--active-50);--flat-active-background:var(--active-100);--outlined-hover-background:hsl(from var(--active-100) h s l / 20%);--outlined-active-background:hsl(from var(--active-100) h s l / 50%);--text-hover-background:hsl(from var(--active-100) h s l / 20%);--text-active-background:hsl(from var(--active-100) h s l / 50%);--shadow-color:hsl(from var(--active-500) h s l / 20%);--focus-background:hsl(from var(--active-100) h s l / 20%)}.button.warning{--color:var(--warning-500);--solid-background:var(--warning-500);--solid-text:var(--warning-50);--solid-hover-background:var(--warning-400);--solid-active-background:var(--warning-600);--flat-background:hsl(from var(--warning-100) h s l / 80%);--flat-hover-background:var(--warning-50);--flat-active-background:var(--warning-100);--outlined-hover-background:hsl(from var(--warning-100) h s l / 20%);--outlined-active-background:hsl(from var(--warning-100) h s l / 50%);--text-hover-background:hsl(from var(--warning-100) h s l / 20%);--text-active-background:hsl(from var(--warning-100) h s l / 50%);--shadow-color:hsl(from var(--warning-500) h s l / 20%);--focus-background:hsl(from var(--warning-100) h s l / 20%)}.button.alert{--color:var(--alert-500);--solid-background:var(--alert-500);--solid-text:var(--alert-50);--solid-hover-background:var(--alert-400);--solid-active-background:var(--alert-600);--flat-background:hsl(from var(--alert-100) h s l / 80%);--flat-hover-background:var(--alert-50);--flat-active-background:var(--alert-100);--outlined-hover-background:hsl(from var(--alert-100) h s l / 20%);--outlined-active-background:hsl(from var(--alert-100) h s l / 50%);--text-hover-background:hsl(from var(--alert-100) h s l / 20%);--text-active-background:hsl(from var(--alert-100) h s l / 50%);--shadow-color:hsl(from var(--alert-500) h s l / 20%);--focus-background:hsl(from var(--alert-100) h s l / 20%)}.button.info{--color:var(--info-500);--solid-background:var(--info-500);--solid-text:var(--info-50);--solid-hover-background:var(--info-400);--solid-active-background:var(--info-600);--flat-background:hsl(from var(--info-100) h s l / 80%);--flat-hover-background:var(--info-50);--flat-active-background:var(--info-100);--outlined-hover-background:hsl(from var(--info-100) h s l / 20%);--outlined-active-background:hsl(from var(--info-100) h s l / 50%);--text-hover-background:hsl(from var(--info-100) h s l / 20%);--text-active-background:hsl(from var(--info-100) h s l / 50%);--shadow-color:hsl(from var(--info-500) h s l / 20%);--focus-background:hsl(from var(--info-100) h s l / 20%)}.button:disabled{color:var(--neutral-200);pointer-events:none}.button.solid:disabled{background:var(--neutral-200);color:var(--neutral-50)}.button.flat:disabled{background:hsl(from var(--neutral-50) h s l / 80%)}.button.outlined:disabled,.button.text:disabled{background:0 0}
.switch-container{--width:attr(data-width);--dot-size:attr(data-dot-size);--dot-hover-size:attr(data-dot-hover-size);--padding:attr(data-padding);--color:var(--neutral-500);--color-dark:var(--neutral-800);--color-contrast:var(--neutral-50);align-items:center;gap:.5em;width:fit-content;display:flex}.switch-container .switch{width:calc(var(--width) + var(--padding) * 2);background:var(--background-paper);padding:var(--padding);border-radius:100em;transition:all .3s;position:relative}.switch-container .switch .switch-dot{width:var(--dot-size);height:var(--dot-size);background:var(--color);z-index:1;border-radius:100em;margin-left:0;transition:all .3s;display:block;position:relative}.switch-container .switch .switch-icon{cursor:pointer;display:block}.switch-container .switch .switch-internal-left-icon,.switch-container .switch .switch-internal-right-icon{width:var(--dot-size);height:var(--dot-size);top:var(--padding);color:var(--color-contrast);place-content:center;transition:all .3s;display:grid;position:absolute}.switch-container .switch .switch-internal-left-icon{left:var(--padding)}.switch-container .switch .switch-internal-right-icon{right:var(--padding)}.switch-container .switch.is-checked{background:var(--color)}.switch-container .switch.is-checked .switch-dot{margin-left:calc(var(--width) - var(--dot-size));background:color-mix(in hsl, var(--color), var(--color-contrast) 75%)}.switch-container .switch:not(.is-readonly):has(input:disabled){background:var(--background-disabled)}.switch-container .switch:not(.is-readonly):has(input:disabled) .switch-dot{background:var(--foreground-disabled)}.switch-container .switch:not(.is-readonly):has(input:disabled) .switch-internal-left-icon,.switch-container .switch:not(.is-readonly):has(input:disabled) .switch-internal-right-icon{color:var(--foreground-disabled)}.switch-container .switch:not(.is-readonly):has(input:disabled).is-checked{background:var(--color-dark)}.switch-container .switch .switch-checkbox{cursor:pointer;opacity:0;z-index:3;width:100%;height:100%;position:absolute;top:0;left:0}.switch-container .switch-label{cursor:pointer;-webkit-user-select:none;user-select:none;padding:0 .5em}.switch-container .switch:not(:has(.is-readonly,input:disabled)):hover .switch-dot{box-shadow:0 0 0 calc(.3 * var(--dot-size)) color-mix(in hsl, var(--color) 50%, var(--color-contrast))}.switch-container:has(.switch-icon:hover) .switch:not(:has(.is-readonly,input:disabled)) .switch-dot{box-shadow:0 0 0 calc(.3 * var(--dot-size)) color-mix(in hsl, var(--color) 50%, var(--color-contrast))}.switch-container:has(.switch-label:hover) .switch:not(:has(.is-readonly,input:disabled)) .switch-dot{box-shadow:0 0 0 calc(.3 * var(--dot-size)) color-mix(in hsl, var(--color) 50%, var(--color-contrast))}.switch-container .switch:not(:has(.is-readonly,input:disabled)):active .switch-dot{width:var(--dot-hover-size)}.switch-container:has(.switch-icon:active) .switch:not(:has(.is-readonly,input:disabled)) .switch-dot{width:var(--dot-hover-size)}.switch-container:has(.switch-label:active) .switch:not(:has(.is-readonly,input:disabled)) .switch-dot{width:var(--dot-hover-size)}.switch-container .switch:not(:has(.is-readonly,input:disabled)).is-checked:active .switch-dot{margin-left:calc(var(--width) - var(--dot-hover-size))}.switch-container:has(.switch-icon:active) .switch:not(:has(.is-readonly,input:disabled)).is-checked .switch-dot{margin-left:calc(var(--width) - var(--dot-hover-size))}.switch-container:has(.switch-label:active) .switch:not(:has(.is-readonly,input:disabled)).is-checked .switch-dot{margin-left:calc(var(--width) - var(--dot-hover-size))}.switch-container.color-primary{--color:var(--primary-500);--color-dark:var(--primary-700);--color-contrast:var(--primary-50)}.switch-container.color-secondary{--color:var(--secondary-500);--color-dark:var(--secondary-700);--color-contrast:var(--secondary-50)}.switch-container.color-tertiary{--color:var(--tertiary-500);--color-dark:var(--tertiary-700);--color-contrast:var(--tertiary-50)}.switch-container.color-active{--color:var(--active-500);--color-dark:var(--active-700);--color-contrast:var(--active-50)}.switch-container.color-warning{--color:var(--warning-500);--color-dark:var(--warning-700);--color-contrast:var(--warning-50)}.switch-container.color-alert{--color:var(--alert-500);--color-dark:var(--alert-700);--color-contrast:var(--alert-50)}.switch-container.color-info{--color:var(--info-500);--color-dark:var(--info-700);--color-contrast:var(--info-50)}