.field-multi-select{width:100%;height:2.5rem;display:flex;position:relative;margin-bottom:1.5rem;border-color:var(--color-white);&>label{top:0;left:.75rem;display:flex;height:100%;width:-moz-fit-content;width:fit-content;padding:0 .25rem;position:absolute;font-size:.875rem;transition:transform .1s ease-in-out,font-size .1s ease-in-out;font-weight:400;align-items:center;white-space:nowrap;&:has(+.input-wrapper>button:not(.hidden-close)),&:has(+.input-wrapper>input:focus),&:has(+.input-wrapper>input:not(:placeholder-shown)),&:has(+.input-wrapper>input:placeholder-shown),&:has(~fieldset.open){top:-.225rem;left:0;position:relative;font-size:.75rem;transform:translateY(-1rem)}}&:before{width:.75rem;border:1px solid;border-right:none;border-color:inherit;border-radius:.5rem 0 0 .5rem}&:after,&:before{height:2.5rem;content:""}&:after{flex:1 1;width:100%;border:1px solid;border-left:none;border-color:inherit;border-radius:0 .5rem .5rem 0}&:has(fieldset.open){&:before{border-radius:.5rem 0 0}&:after{border-radius:0 .5rem 0 0}}&:focus-within,&:has(fieldset.open){border-color:var(--color-turquoise-500);&>label{color:var(--color-turquoise-500)}& .input-wrapper{&:after{background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjM1MzIgMTEuNzhMMTQuNTMzMiAxMC41OTMzTDcuOTMzMiA0TDEuMzMzMiAxMC42TDIuNTEzMiAxMS43OEw3LjkzMzIgNi4zNkwxMy4zNTMyIDExLjc4WiIgZmlsbD0iIzFFRjFDNiIvPgo8L3N2Zz4=")}}}& input[type=text]{color:var(--color-white);width:100%;height:100%;border:none;outline:none;position:relative;font-size:.875rem;background:transparent;font-weight:400;&::placeholder{color:var(--color-white);opacity:1}}& input[type=checkbox]{clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}& .input-wrapper{top:2px;left:.5rem;height:100%;display:flex;padding:0 1.5rem 0 .5rem;position:absolute;width:calc(100% - 1rem);align-items:center;flex-direction:row-reverse;border-bottom:1px solid;border-color:inherit;background:transparent;&:after{right:.5rem;width:1rem;height:1rem;content:"";background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIuNTEzOTggNC4wMDEyNUwxLjMzMzk4IDUuMTg3OTJMNy45MzM5OCAxMS43ODEyTDE0LjUzNCA1LjE4MTI1TDEzLjM1NCA0LjAwMTI1TDcuOTMzOTggOS40MjEyNUwyLjUxMzk4IDQuMDAxMjVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=");position:absolute}& span.number-calc{color:var(--color-white);white-space:nowrap;margin-left:.25rem;font-size:.875rem;list-style:1.25rem;pointer-events:none}& button:not(.hidden-close){height:1.25rem;padding:0 .4375rem 0 .625rem;font-size:.625rem;line-height:1rem;display:flex;align-items:center;border:none;color:var(--color-turquoise-500);background:var(--color-turquoise-900);border-radius:1in;white-space:nowrap;margin:0 .125rem;& svg{color:var(--color-turquoise-100);cursor:pointer;margin-left:.4375rem}&:first-of-type{margin-right:.5rem}}}& fieldset{display:none;z-index:10;&.open{top:2.5rem;width:100%;margin:1px 0 0;display:flex;border:1px solid;border-color:inherit;flex-basis:100%;border-radius:0 0 .5rem .5rem;flex-wrap:wrap;padding:.5rem .875rem;position:absolute;background:var(--color-neutral-900);& ul:has(+button):after{bottom:3rem;left:1rem;content:"";position:absolute;width:calc(100% - 2rem);height:1px;background:var(--color-neutral-500)}& ul{width:100%;padding:0 0 .5rem;list-style:none;min-height:12rem;max-height:20rem;overflow-y:scroll;margin-bottom:1rem;& li{padding:.5rem 0}}&>button{cursor:pointer;color:var(--color-danger-400);border:none;margin-left:auto;line-height:1.25rem;background:transparent;height:2rem}}}& label:has([type=checkbox]){cursor:pointer;position:relative;padding-left:2rem;&:after,&:before{width:1.25rem;height:1.25rem;content:"";position:absolute}&:before{left:0;border:1px solid var(--color-white);border-radius:.25rem}&:after{top:.1rem;left:.25rem}}& label:has([type=checkbox]:checked){&:before{border:1px solid var(--color-turquoise-500);outline:1px solid var(--color-turquoise-500)}&:after{background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuODYzMzkgMTAuNTg0NkwzLjA4MzM5IDcuODA0NThMMi4xMzY3MiA4Ljc0NDU4TDUuODYzMzkgMTIuNDcxMkwxMy44NjM0IDQuNDcxMjVMMTIuOTIzNCAzLjUzMTI1TDUuODYzMzkgMTAuNTg0NloiIGZpbGw9IiMxRUYxQzYiLz4KPC9zdmc+") no-repeat}}& label:has([type=checkbox]:focus-visible),& label:has([type=checkbox]:focus-visible:checked){&:before{border:1px solid var(--color-turquoise-700);outline:1px solid var(--color-turquoise-700)}}& .hidden-close{top:0;right:-.85rem;height:100%!important;position:absolute;z-index:1;opacity:0}}.hidden{display:none}.single-select-label{top:0;left:.75rem;display:flex;height:100%;width:-moz-fit-content;width:fit-content;padding:0 .25rem;position:absolute;font-size:.875rem;transition:transform .1s ease-in-out,font-size .1s ease-in-out;font-weight:400;align-items:center;white-space:nowrap;&.selected{top:-.15rem;left:0;position:relative;font-size:.75rem;transform:translateY(-1rem)}}.single-select-menu{&>button{position:absolute;width:100%;height:100%;text-align:left;background:none;color:var(--color-neutral-100);padding-right:2rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;&:focus{outline:none}&:after{right:.5rem;top:.875rem;width:1rem;height:1rem;content:"";background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIuNTEzOTggNC4wMDEyNUwxLjMzMzk4IDUuMTg3OTJMNy45MzM5OCAxMS43ODEyTDE0LjUzNCA1LjE4MTI1TDEzLjM1NCA0LjAwMTI1TDcuOTMzOTggOS40MjEyNUwyLjUxMzk4IDQuMDAxMjVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4=");position:absolute}&[aria-expanded=true]:after{background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjM1MzIgMTEuNzhMMTQuNTMzMiAxMC41OTMzTDcuOTMzMiA0TDEuMzMzMiAxMC42TDIuNTEzMiAxMS43OEw3LjkzMzIgNi4zNkwxMy4zNTMyIDExLjc4WiIgZmlsbD0iIzFFRjFDNiIvPgo8L3N2Zz4=")}}& fieldset{position:absolute;width:calc(100% + 1.5rem);max-height:12rem;overflow:auto;top:2.5rem;left:-.75rem;z-index:10;background:var(--color-neutral-900);border:1px solid var(--color-turquoise)!important;border-radius:0 0 .5rem .5rem;padding:1rem!important;margin:0;ul{list-style:none;margin:0;padding:0;li button{width:100%;height:1.5rem;text-align:left;background:none;color:var(--color-neutral-100);&.placeholder{color:var(--color-neutral-200)}&.focused,&:focus,&:hover{outline:none}&.focused{color:var(--color-turquoise)}}}}& .hidden{display:none}& .visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}