/* BUTTON BASE */ .tertiary-button { position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid var(--button-brand-600-color); background: transparent; color: var(--button-brand-600-color); transition: border-color 0.35s ease, color 0.35s ease, background-color 0.35s ease; } /* TEXT */ .tertiary-button .text-button { transition: color 0.35s ease; } /* ICON WRAPPER */ .tertiary-button .primary-arrow-icon { position: relative; width: 32px; height: 32px; overflow: hidden; } /* BOTH SVG */ .tertiary-button .primary-arrow-icon svg { transition: all 0.35s ease, fill 0.35s ease, stroke 0.35s ease; } /* CIRCLE */ .tertiary-button .circle-icon-svg { position: absolute; inset: 0; } /* ARROW */ .tertiary-button .arrow-icon-svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.35s ease; } /* HOVER */ .tertiary-button:hover { border-color: var(--bg-brand-800-color); color: var(--bg-brand-800-color); } /* TEXT HOVER */ .tertiary-button:hover .text-button { color: var(--bg-brand-800-color); } /* SVG COLOR */ .tertiary-button:hover svg path { fill: var(--bg-brand-800-color); stroke: var(--bg-brand-800-color); } /* ARROW MOVE */ .tertiary-button:hover .arrow-icon-svg { left: 12%; }