<a href="https://www.verisure.it" class="supt-button-country" target="_blank" rel="noopener noreferrer">
<span class="supt-button-country__inner">
<img class="supt-button-country__flag" src="/sites/gv/files/flmngr/countries/italy.svg" alt="Italy">
<span class="supt-button-country__title">Italy</span>
</span>
</a>
No notes defined.
<a href="{{ href }}" class="supt-button-country" target="_blank" rel="noopener noreferrer">
<span class="supt-button-country__inner">
<img class="supt-button-country__flag" src="{{ path(flag) }}" alt="{{ title }}">
<span class="supt-button-country__title">{{ title }}</span>
</span>
</a>
{
"title": "Italy",
"href": "https://www.verisure.it",
"flag": "/sites/gv/files/flmngr/countries/italy.svg"
}
.supt-button-country {
display: inline-block;
border-radius: 9999px;
position: relative;
outline: none;
transition: background-color 0.3s;
@media (min-width: $breakpoint-md) {
padding: 6px 4px 4px 6px;
}
&::after {
@media (min-width: $breakpoint-md) {
content: '';
position: absolute;
inset: 0;
border-radius: 9999px;
box-shadow:
8px 8px 16px 0px $color-grey-1,
-8px -8px 16px 0px $color-white;
opacity: 0;
transition: opacity 0.5s;
}
}
&__inner {
display: flex;
align-items: center;
gap: $spacing-1-5;
border-radius: 9999px;
position: relative;
transition: background-color 0.3s;
@media (min-width: $breakpoint-md) {
padding: 4px 10px 6px 8px;
}
&::after {
@media (min-width: $breakpoint-md) {
content: '';
position: absolute;
inset: 0;
border-radius: 9999px;
box-shadow:
-1px -1px 0px 0px $color-white inset,
-2px -2px 2px 0px $color-grey-2 inset,
-1px -1px 0px 0px $color-white,
-2px -2px 2px 0px $color-grey-2;
opacity: 0;
transition: opacity 0.5s;
}
}
}
&__name {
@extend %t-body-s;
color: $color-grey-5;
}
&__flag {
width: 14px;
height: 14px;
border-radius: 50%;
background-size: cover;
background-position: center;
flex-shrink: 0;
overflow: hidden;
@media (min-width: $breakpoint-md) {
width: 16px;
height: 16px;
}
}
&:hover,
&:focus-visible {
@media (min-width: $breakpoint-md) {
background-color: $color-grey-background;
&::after {
opacity: 1;
}
.supt-button-country__inner {
background-color: $color-grey-background;
&::after {
opacity: 1;
}
}
}
}
}