/* Buttons */
.button{ display: inline-flex; gap: 6px; align-items: center; padding: 13px 20px; border: 1px solid var(--green); border-radius: 0; background: linear-gradient(var(--green), var(--green)) no-repeat left center / 0% 100% transparent; color: var(--green); font-family: var(--poppins); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: var(--transition); cursor: pointer; }
.button .arrow{ font-size: 16px; line-height: 1; flex-shrink: 0; transition: var(--transition); }
.button:focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; background-size: 100% 100%; color: var(--white); }
.button:focus-visible .arrow{ transform: translateX(5px); }
.button:active{ transform: scale(.97); transition-duration: .12s; }

/* On dark backgrounds */
.button.button-white{ border-color: var(--white); background-image: linear-gradient(var(--white), var(--white)); color: var(--white); }
.button.button-white:focus-visible{ outline-color: var(--white); color: var(--green); }

@media screen and (max-width: 1280px){

    .button{ padding: 12px 18px; font-size: 14px; }

}

@media screen and (max-width: 1023px){

}

@media screen and (max-width: 767px){

}

@media screen and (max-width: 540px){

}

/* Hover only on devices that really hover (touch keeps no sticky fill) */
@media (hover: hover) and (pointer: fine){

    .button:hover{ background-size: 100% 100%; color: var(--white); }
    .button:hover .arrow{ transform: translateX(5px); }
    .button.button-white:hover{ color: var(--green); }

}

/* Touch screens: 44px minimum target */
@media (pointer: coarse){

    .button{ padding: 15px 20px; }

}