.wp-block-greyd-search-filter-buttons {
--greyd-filter-buttons-gap: calc( 0.5vw + 0.3rem );
--greyd-filter-buttons-color: currentColor;
--greyd-filter-buttons-bg-color: var(--wp--preset--color--base, var(--wp--preset--color--color-33));
--greyd-filter-buttons-border-color: var(--wp--preset--color--mediumlight, var(--wp--preset--color--color-22));
}
.wp-block-greyd-search-filter-buttons {
display: flex;
flex-wrap: wrap; gap: var(--greyd-filter-buttons-gap); }
.wp-block-greyd-search-filter-buttons .greyd_filter_button {
display: flex;
cursor: pointer;
align-items: center;
} .wp-block-greyd-search-filter-buttons input[type="radio"] {
display: inline-block !important;
position: absolute !important;
opacity: 0;
z-index: -1;
}
.wp-block-greyd-search-filter-buttons .radio input[type="radio"],
.wp-block-greyd-search-filter-buttons .radio-inline input[type="radio"] {
width: auto;
margin-left: 0px;
}
.wp-block-greyd-search-filter-buttons .radio span,
.wp-block-greyd-search-filter-buttons .radio-inline span {
margin-left: 0px !important;
margin-right: 0px !important;
}
.wp-block-greyd-search-filter-buttons input[type="radio"] + span,
.wp-block-greyd-search-filter-buttons input[type="radio"] + label {
cursor: pointer;
}
.wp-block-greyd-search-filter-buttons input[type="radio"] + span::before,
.wp-block-greyd-search-filter-buttons input[type="radio"] + label::before {
content: "\5b";
font-family: ElegantIcons;
font-weight: 400;
margin-right: 5px;
}
.wp-block-greyd-search-filter-buttons.is-style-tabs input[type="radio"] + span::before, 
.wp-block-greyd-search-filter-buttons.is-style-clear input[type="radio"] + span::before, 
.wp-block-greyd-search-filter-buttons.is-style-chips input[type="radio"] + span::before, 
.wp-block-greyd-search-filter-buttons.is-style-prim input[type="radio"] + span::before,
.wp-block-greyd-search-filter-buttons.is-style-sec input[type="radio"] + span::before, 
.wp-block-greyd-search-filter-buttons.is-style-trd input[type="radio"] + span::before {
display: none;
}
.wp-block-greyd-search-filter-buttons.is-style-checkbox input[type="radio"] + span::before {
content: "\56";
}
.wp-block-greyd-search-filter-buttons.is-style-checkbox .greyd_filter_button.is-active input[type="radio"] + span::before {
content: "\5a";
}
.wp-block-greyd-search-filter-buttons .greyd_filter_button.is-active input[type="radio"] + span::before,
.wp-block-greyd-search-filter-buttons .greyd_filter_button.is-active input[type="radio"] + label::before {
content: "\5c";
} .wp-block-greyd-search-filter-buttons.is-style-tabs {
position: relative;
padding: 0 var(--greyd-filter-buttons-gap);
}
.wp-block-greyd-search-filter-buttons.is-style-tabs::before {
content: " ";
position: absolute;
display: block;
left: 0;
right: 0;
bottom: 0;
border-bottom: 1px solid var(--greyd-filter-buttons-border-color);
}
.wp-block-greyd-search-filter-buttons.is-style-tabs .greyd_filter_button {
position: relative; color: var(--greyd-filter-buttons-color, currentColor);
background: var(--greyd-filter-buttons-bg-color);
border: 1px solid var(--greyd-filter-buttons-border-color);
padding: calc( 0.5vw + 0.3rem ) calc( 1vw + 0.36rem ) calc( 0.5vw + 0.3rem - 1px ); }
.wp-block-greyd-search-filter-buttons.is-style-tabs .greyd_filter_button.is-active {
--greyd-filter-buttons-bg-color: var(--wp--preset--color--background, var(--wp--preset--color--color-62));
border-bottom: none;
} .wp-block-greyd-search-filter-buttons.is-style-chips {
--greyd-filter-buttons-bg-color: var(--wp--preset--color--background, var(--wp--preset--color--color-62));
}
.wp-block-greyd-search-filter-buttons.is-style-chips.tabs {
margin-bottom: max( var(--wp--style--block-gap), 1em );
}
.wp-block-greyd-search-filter-buttons.is-style-chips .greyd_filter_button {
color: var(--greyd-filter-buttons-color, currentColor);
background: var(--greyd-filter-buttons-bg-color);
border: 1px solid var(--greyd-filter-buttons-border-color);
padding: calc( 0.5vw + 0.3rem ) calc( 1vw + 0.36rem );
border-radius: 100vw;
}
.wp-block-greyd-search-filter-buttons.is-style-chips .greyd_filter_button.is-active {
--greyd-filter-buttons-color: var(--wp--preset--color--background, var(--wp--preset--color--color-23));
--greyd-filter-buttons-bg-color: var(--wp--preset--color--foreground, var(--wp--preset--color--color-31));
--greyd-filter-buttons-border-color: var(--wp--preset--color--foreground, var(--wp--preset--color--color-31));
border-bottom-color: var(--greyd-filter-buttons-border-color);
} .is-style-switch input[type="radio"] + span + span,
.is-style-switch .option .icn + span {
vertical-align: super;
}
.is-style-switch input[type="radio"] + span {
position: relative;
display: inline-block;
vertical-align: top;
height: 22px;
width: 36px;
margin: 0 6px 6px 2px;
color: var(--greyd-filter-buttons-color, currentColor);
transition: all 0.2s ease;
} .is-style-switch input[type="radio"] + span::after {
content: ' ';
position: absolute;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
border-radius: 12px;
background-color: var(--greyd-filter-buttons-color, currentColor);
} .is-style-switch input[type="radio"] + span::before {
content: ' ' !important;
display: inline-block;
position: relative;
z-index: 1;
vertical-align: top;
border-radius: 100%;
height: 16px;
width: 16px;
margin: 3px;
margin-right: 17px;
background-color: var(--greyd-filter-buttons-bg-color);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
transition: all .2s ease-out;
}
.is-style-switch .greyd_filter_button.is-active input[type="radio"] + span::before {
content: ' ';
margin-left: 17px;
margin-right: 3px;
}