@layer molecule{.toggle-picker{display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative}.toggle-picker__option{display:flex;justify-content:center;align-items:center;position:relative;z-index:1;height:100%;text-align:center;cursor:pointer;transition:all .3s ease}.toggle-picker__option-label{padding:1.25vw 6.25vw;word-break:break-word;font-size:calc(var(--regular-input-font-size) * var(--mobile-base-size) * 1px);color:var(--toggle-picker-text-color, var(--togglePicker-text-color));pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all .3s ease}@media(min-width:1024px){.toggle-picker__option-label{padding:5px 30px;font-size:calc(var(--regular-input-font-size) * 1px)}}.toggle-picker__button{display:flex;justify-content:center;align-items:center;position:absolute;inset-inline-start:50%;transform:translate(-50%);width:calc(calc(var(--regular-input-height) * var(--mobile-base-size) * 1px) - calc(var(--regular-input-padding) * var(--mobile-base-size) * 1px));height:calc(100% - calc(var(--regular-input-padding) * var(--mobile-base-size) * 1px));border-radius:calc(calc(var(--regular-input-border-shape) * var(--mobile-base-size) * 1px) * .6);background:var(--toggle-picker-button-background, var(--togglePicker-button-background));transition:all .3s ease}@media(min-width:1024px){.toggle-picker__button{width:calc(calc(var(--regular-input-height) * 1px) - calc(var(--regular-input-padding) * 1px));height:calc(100% - calc(var(--regular-input-padding) * 1px));border-radius:calc(calc(var(--regular-input-border-shape) * 1px) * .6)}}.toggle-picker__button-icon{position:absolute;max-width:calc(100% - calc(var(--regular-input-padding) * var(--mobile-base-size) * 1px) / 2);max-height:calc(100% - calc(var(--regular-input-padding) * var(--mobile-base-size) * 1px) / 2);visibility:visible;opacity:1}@media(min-width:1024px){.toggle-picker__button-icon{max-width:calc(100% - calc(var(--regular-input-padding) * 1px) / 2);max-height:calc(100% - calc(var(--regular-input-padding) * 1px) / 2)}}.toggle-picker__button-icon path,.toggle-picker__button-icon polygon{fill:var(--toggle-picker-arrow-color, var(--togglePicker-arrow-color))}.toggle-picker--start .toggle-picker__button,.toggle-picker--end .toggle-picker__button{transform:none;width:calc(50% - calc(var(--regular-input-padding) * var(--mobile-base-size) * 1px) / 2)}@media(min-width:1024px){.toggle-picker--start .toggle-picker__button,.toggle-picker--end .toggle-picker__button{width:calc(50% - calc(var(--regular-input-padding) * 1px) / 2)}}.toggle-picker--start .toggle-picker__button-icon,.toggle-picker--end .toggle-picker__button-icon{visibility:hidden;opacity:0}.toggle-picker--start .toggle-picker__option--start .toggle-picker__option-label{color:var(--toggle-picker-text-color-active, var(--togglePicker-text-color-active))}.toggle-picker--start .toggle-picker__button{inset-inline-start:calc(calc(var(--regular-input-padding) * var(--mobile-base-size) * 1px) / 2)}@media(min-width:1024px){.toggle-picker--start .toggle-picker__button{inset-inline-start:calc(calc(var(--regular-input-padding) * 1px) / 2)}}.toggle-picker--end .toggle-picker__option--end .toggle-picker__option-label{color:var(--toggle-picker-text-color-active, var(--togglePicker-text-color-active))}.toggle-picker--end .toggle-picker__button{inset-inline-start:50%}}
