.c-selectable-border{width:100%;height:100%;position:absolute;top:0;left:0}.c-selectable-icon,.c-selectable-icon-active{width:100%;height:100%;position:absolute;top:0;left:0;transform:translate(0,0)}.c-selectable-icon{fill:var(--selectable-color)}.c-selectable-icon-active{fill:#fff}.c-selectable{--icon-size:25px;cursor:pointer;justify-content:flex-start;align-items:center;display:flex;position:relative}@media only screen and (width<=1023px){.c-selectable{--icon-size:20px;height:var(--icon-size)}}.c-selectable>.selectable{width:var(--icon-size);height:var(--icon-size);border-radius:50%;flex-shrink:0;position:relative}.c-selectable>.selectable>.inactive-border{box-sizing:border-box;border-style:solid;border-width:1px;border-color:var(--color-text-base-10);border-radius:50%;width:100%;height:100%;transition:opacity .3s;position:absolute}.c-selectable>.selectable>.c-selectable-border,.c-selectable>.selectable>.c-selectable-icon{transition:opacity .3s}.c-selectable.-is-inactive>.selectable{background:#ffffff80}.c-selectable.-is-inactive>.selectable>.c-selectable-icon-active{opacity:1;background:var(--selectable-color);border-radius:50%}.c-selectable.-is-inactive>.selectable>.c-selectable-border,.c-selectable.-is-inactive>.selectable>.c-selectable-icon,.c-selectable.-is-inactive>.selectable>.c-selectable-icon-active{opacity:0}.c-selectable.-is-inactive.-has-animation>.selectable>.c-selectable-icon-active{animation:.2s bounce-inactive}@media only screen and (width>=1024px){.c-selectable.-is-inactive:hover>.selectable>.c-selectable-border,.c-selectable.-is-inactive:hover>.selectable>.c-selectable-icon{opacity:1}.c-selectable.-is-inactive:hover>.selectable>.c-selectable-icon-active{display:none}}.c-selectable.-is-active>.selectable{background-repeat:no-repeat;background:var(--selectable-color)}.c-selectable.-is-active>.selectable>.c-selectable-border,.c-selectable.-is-active>.selectable>.inactive-border{opacity:0}.c-selectable.-is-active>.selectable>.c-selectable-icon-active,.c-selectable.-is-active>.selectable>.c-selectable-border{opacity:1}.c-selectable.-has-animation.-is-active>.selectable>.c-selectable-icon-active,.c-selectable.-has-animation.-is-active>.selectable>.c-selectable-border{animation:.3s bounce-active}.c-selectable:not(.-has-slot){min-width:var(--icon-size);min-height:var(--icon-size);display:inline-block}.c-selectable.-has-slot.-left>.selectable{order:0}.c-selectable.-has-slot.-right>.selectable{order:1}.c-selectable.-disabled{cursor:default;pointer-events:none}.c-selectable.-is-active:not(.-disabled)>.selectable>.shadow{content:"";background:var(--selectable-color);z-index:-10;opacity:.5;filter:blur(7px);border-radius:50px;width:75%;height:75%;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.c-selectable.-disabled>.selectable{-webkit-user-select:none;user-select:none;pointer-events:none;background:var(--color-text-base-10);border-color:#0000}.c-selectable.-disabled>.selectable>.inactive-border{border:unset}.c-selectable.-disabled.-is-active>.selectable>.c-selectable-icon{display:none}.c-selectable.-disabled.-is-active>.selectable>.c-selectable-icon-active{fill:var(--color-text-base);opacity:.3;display:initial}@keyframes bounce-active{0%{transform:scale(1.5)}to{transform:scale(1)}}@keyframes bounce-inactive{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}