|
|
|
|
|
.btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: var(--spacing-3) var(--spacing-6); |
|
|
border-radius: var(--radius-lg); |
|
|
font-weight: var(--font-weight-semibold); |
|
|
font-size: var(--font-size-base); |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
transition: all var(--transition-normal); |
|
|
text-decoration: none; |
|
|
white-space: nowrap; |
|
|
min-height: 44px; |
|
|
} |
|
|
|
|
|
.btn:disabled { |
|
|
opacity: 0.6; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
|
|
|
.btn-sm { |
|
|
padding: var(--spacing-2) var(--spacing-4); |
|
|
font-size: var(--font-size-sm); |
|
|
min-height: 40px; |
|
|
} |
|
|
|
|
|
.btn-lg { |
|
|
padding: var(--spacing-4) var(--spacing-8); |
|
|
font-size: var(--font-size-lg); |
|
|
min-height: 48px; |
|
|
} |
|
|
|
|
|
.btn-full { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
@media (max-width: 639px) { |
|
|
.btn { |
|
|
padding: var(--spacing-3) var(--spacing-4); |
|
|
font-size: var(--font-size-sm); |
|
|
} |
|
|
|
|
|
.btn-lg { |
|
|
padding: var(--spacing-4) var(--spacing-6); |
|
|
font-size: var(--font-size-base); |
|
|
} |
|
|
} |
