@charset "UTF-8";
 .button {
--button-bg: transparent;
--button-color: #153855;
--button-icon: url(//lctecnomec.it/wp-content/themes/tema-custom-lc/Immagini/icon-arrow-right-blue.svg);
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 34px;
height: 50px;
min-height: 50px;
padding: 0 20px 0 24px;
border: 0;
border-radius: 0;
background-color: var(--button-bg);
color: var(--button-color);
font-family: "Kanit", sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition:
background-color 180ms ease,
color 180ms ease,
box-shadow 180ms ease;
}
.button::after {
content: "";
flex: 0 0 28px;
width: 28px;
height: 22px;
background-image: var(--button-icon);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
transition: transform 180ms ease;
}
.button:hover::after {
transform: translateX(6px);
}
.button:focus-visible {
outline: 2px solid #2874bb;
outline-offset: 4px;
} .button--blue {
--button-bg: #3473c5;
--button-color: #ffffff;
--button-icon: url(//lctecnomec.it/wp-content/themes/tema-custom-lc/Immagini/icon-arrow-right-white.svg);
}
.button--blue:hover {
background-color: #153855;
color: #ffffff;
} .button--white {
--button-bg: #ffffff;
--button-color: #153855;
--button-icon: url(//lctecnomec.it/wp-content/themes/tema-custom-lc/Immagini/icon-arrow-right-blue.svg);
box-shadow: 0 0 0 1px rgba(21, 56, 85, 0.08);
}
.button--white:hover {
--button-icon: url(//lctecnomec.it/wp-content/themes/tema-custom-lc/Immagini/icon-arrow-right-white.svg);
background-color: #153855;
color: #ffffff;
} .button--gray {
--button-bg: #f2f4f7;
--button-color: #153855;
--button-icon: url(//lctecnomec.it/wp-content/themes/tema-custom-lc/Immagini/icon-arrow-right-blue.svg);
}
.button--gray:hover {
background-color: #e3e9ef;
color: #153855;
} .button-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 20px;
width: 100%;
}
.button-group--center {
justify-content: center;
}
.button-group--right {
justify-content: flex-end;
}
.button-group--between {
justify-content: space-between;
}
.button--full {
width: 100%;
} @media only screen and (min-width: 801px) and (max-width: 991px) {
.button {
height: 50px;
min-height: 50px;
padding: 0 20px 0 24px;
gap: 30px;
font-size: 18px;
}
.button-group {
gap: 18px;
}
}
@media only screen and (max-width: 800px) {
.button {
height: 50px;
min-height: 50px;
padding: 0 18px 0 22px;
gap: 26px;
font-size: 18px;
}
.button::after {
flex-basis: 26px;
width: 26px;
height: 20px;
}
.button-group {
gap: 16px;
}
}