@layer components{:root{--btn-text-color: var(--color-ink);--btn-bg-color: var(--color-brand-yellow);--btn-border-color: var(--color-brand-yellow);--btn-hover-text-color: var(--color-brand-yellow);--btn-hover-bg-color: var(--color-ink);--btn-hover-border-color: var(--color-ink)}.btn{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;cursor:pointer;position:relative;text-decoration:none;width:fit-content;box-shadow:none;font-family:var(--font-primary);font-size:var(--text-base);font-weight:var(--font-weight-semibold);line-height:1.2;padding:1rem 1.75rem;border:1px solid var(--btn-border-color);border-radius:var(--radius-lg);background-color:var(--btn-bg-color);color:var(--btn-text-color);transition:background-color .18s ease,color .18s ease,border-color .18s ease}.btn:hover,.btn:focus-visible,.btn.is-selected,.btn.btn--selected{color:var(--btn-hover-text-color);background-color:var(--btn-hover-bg-color);border-color:var(--btn-hover-border-color)}.btn:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px}.btn .btn__icon,.btn .svg-icon{width:14px;height:14px;flex-shrink:0;transition:transform .2s ease}.btn:hover .btn__icon,.btn:hover .svg-icon,.btn:focus-visible .btn__icon,.btn:focus-visible .svg-icon{transform:translate(6px)}.btn.btn--primary{--btn-text-color: var(--color-ink);--btn-bg-color: var(--color-brand-yellow);--btn-border-color: var(--color-brand-yellow);--btn-hover-text-color: var(--color-brand-yellow);--btn-hover-bg-color: var(--color-ink);--btn-hover-border-color: var(--color-ink)}.btn.btn--secondary{--btn-text-color: var(--color-white);--btn-bg-color: var(--color-ink);--btn-border-color: var(--color-ink);--btn-hover-text-color: var(--color-brand-yellow);--btn-hover-bg-color: var(--color-black);--btn-hover-border-color: var(--color-black)}.btn.btn--subtle{--btn-text-color: var(--color-ink);--btn-bg-color: transparent;--btn-border-color: var(--color-line-strong);--btn-hover-text-color: var(--color-white);--btn-hover-bg-color: var(--color-ink);--btn-hover-border-color: var(--color-ink)}.btn.btn--subtle.btn--inverse{--btn-text-color: var(--color-white);--btn-bg-color: transparent;--btn-border-color: var(--color-white);--btn-hover-text-color: var(--color-black);--btn-hover-bg-color: var(--color-white);--btn-hover-border-color: var(--color-white)}.btn.btn--subtle.btn--on-yellow{--btn-border-color: color-mix(in srgb, var(--color-ink) 70%, transparent)}.btn.btn--fch{--btn-text-color: var(--color-white);--btn-bg-color: var(--color-fch);--btn-border-color: var(--color-fch);--btn-hover-text-color: var(--color-ink);--btn-hover-bg-color: var(--color-white);--btn-hover-border-color: var(--color-white)}.btn.btn--link{--btn-text-color: var(--color-ink);--btn-bg-color: transparent;--btn-border-color: transparent;--btn-hover-text-color: var(--color-ink);--btn-hover-bg-color: transparent;--btn-hover-border-color: transparent;padding:0;border-radius:0}.btn.btn--size-small{padding:.75rem 1.25rem;font-size:var(--text-sm);gap:8px}.btn.btn--size-small .btn__icon,.btn.btn--size-small .svg-icon{width:12px;height:12px}.btn.btn--size-small.btn--icon-alone{padding:.5rem}.btn.btn--size-medium{padding:1rem 1.75rem}.btn.btn--size-medium.btn--icon-alone{padding:.75rem}.btn.btn--size-large{min-height:56px;padding:1.125rem 2rem;gap:16px}.btn.btn--size-large .btn__icon,.btn.btn--size-large .svg-icon{width:16px;height:16px}.btn.btn--size-large.btn--icon-alone{padding:.875rem}.btn.btn--full-width{width:100%}.btn.btn--icon-alone .btn__text{display:none}.btn.btn--icon-left .btn__icon,.btn.btn--icon-left .svg-icon{order:-1}.btn.btn--icon-left:hover .btn__icon,.btn.btn--icon-left:hover .svg-icon,.btn.btn--icon-left:focus-visible .btn__icon,.btn.btn--icon-left:focus-visible .svg-icon{transform:translate(-3px)}.btn.btn--icon-rotate-90 .btn__icon,.btn.btn--icon-rotate-90 .svg-icon{transform:rotate(90deg)}.btn:disabled,.btn.is-disabled,.btn.btn--disabled{cursor:default;opacity:.45}:is(.btn:disabled,.btn.is-disabled,.btn.btn--disabled):hover{transform:none}.btn.btn--subtle:disabled,.btn.btn--subtle.is-disabled,.btn.btn--subtle.btn--disabled{--btn-text-color: var(--color-ink);--btn-bg-color: var(--color-white);--btn-border-color: var(--color-line-hair);--btn-hover-text-color: var(--color-ink);--btn-hover-bg-color: var(--color-white);--btn-hover-border-color: var(--color-line-hair)}}@layer components{.btn:disabled,.btn--disabled{opacity:.5;cursor:default;pointer-events:none}}
