<button class="supt-filter-item">
<span class="supt-filter-item__title">
Europe
</span>
</button>
No notes defined.
<button class="supt-filter-item{{ active ? ' -active' : '' }}">
<span class="supt-filter-item__title">
{{ title }}
</span>
</button>
{
"title": "Europe"
}
.supt-filter-item {
@extend %reset-button;
padding: 10px 16px;
border-radius: 9999px;
border: 1px solid $color-grey-1;
&:focus {
outline: none;
}
* {
pointer-events: none;
}
&__title {
@extend %t-body-s;
font-weight: 500;
color: $color-black;
display: block;
}
&.-active {
border-color: $color-main;
.supt-filter-item__title {
color: $color-main;
}
}
}