/*
!IMPORTANT: Make sure to also run 'pnpm convert-scss-to-js' if you make changes to this file to make sure the changes are reflected in storybook as well
TODO: We'll make this task automatic in the future
*/
/*
!IMPORTANT: Make sure to also run 'pnpm convert-scss-to-js' if you make changes to this file to make sure the changes are reflected in storybook as well
TODO: We'll make this task automatic in the future
*/:host{align-items:center;background:#efefef;background:var(--background-color-fourth,#efefef);border-radius:2.5rem;border-radius:var(--radius-3xl,calc(40rem/var(--orama-base-font-size, 16)));display:inline-flex;overflow:hidden;padding:.125rem;padding:var(--spacing-2xs,calc(2rem/var(--orama-base-font-size, 16)))}:host button{align-items:center;background-color:transparent;border:none;color:#151515;color:var(--text-color-primary,#151515);cursor:pointer;display:flex;gap:.25rem;gap:var(--spacing-xs,calc(4rem/var(--orama-base-font-size, 16)));padding:.5rem .75rem;padding:var(--spacing-s,calc(8rem/var(--orama-base-font-size, 16))) var(--spacing-m,calc(12rem/var(--orama-base-font-size, 16)));position:relative}:host button.selected{color:#fff;color:var(--text-color-reverse,#fff);transition:color .3s ease-in-out;z-index:1}:host button.selected:after{background-color:#000;background-color:var(--background-color-reverse,#000);border-radius:2.5rem;border-radius:var(--radius-3xl,calc(40rem/var(--orama-base-font-size, 16)));content:"";inset:0;padding:.5rem .75rem;padding:var(--spacing-s,calc(8rem/var(--orama-base-font-size, 16))) var(--spacing-m,calc(12rem/var(--orama-base-font-size, 16)));position:absolute;z-index:-1}:host button.selected.animate:after{animation:slideToLeft .3s ease-in-out}:host button.selected.animate:first-child:after{animation:slideToRight .3s ease-in-out}@keyframes slideToRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideToLeft{0%{transform:translateX(-100%)}to{transform:translateX(0)}}