.btn { align-items: center; background-color: var(--btn-background, transparent); border-radius: var(--btn-border-radius, var(--rounded-lg)); border: 1px solid var(--btn-border-color, var(--color-border)); box-shadow: var(--btn-shadow, var(--shadow-sm)); color: var(--btn-color, var(--color-text)); column-gap: var(--size-2); cursor: pointer; display: inline-flex; font-size: var(--btn-font-size, var(--text-sm)); font-weight: var(--btn-font-weight, var(--font-semibold)); justify-content: center; line-height: var(--btn-line-height, var(--leading-6)); padding: var(--btn-padding, var(--size-1_5) var(--size-3_5)); text-align: center; &:hover { filter: contrast(0.85); } &:disabled { opacity: var(--opacity-50); pointer-events: none; } } .btn--primary { --btn-background: var(--color-primary); --btn-border-color: transparent; --btn-color: white; } .btn--plain { --btn-border-color: transparent; --btn-shadow: none; } .btn--small { --btn-font-size: var(--text-xs); --btn-line-height: var(--leading-5); }