.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: none; border-radius: var(--border-radius-md); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-fast); position: relative; } /* Variants */ .button-primary { background-color: var(--primary-color); color: white; } .button-primary:hover:not(:disabled) { background-color: var(--primary-color-dark); } .button-secondary { background-color: var(--secondary-color-light); color: var(--secondary-color-dark); } .button-secondary:hover:not(:disabled) { background-color: var(--secondary-color); color: white; } .button-danger { background-color: var(--error-color); color: white; } .button-danger:hover:not(:disabled) { background-color: var(--error-color-dark); } /* Sizes */ .button-small { padding: 0.5rem 1rem; font-size: var(--font-size-sm); } .button-medium { padding: 0.75rem 1.5rem; font-size: var(--font-size-base); } .button-large { padding: 1rem 2rem; font-size: var(--font-size-lg); } /* States */ .button:disabled { opacity: 0.6; cursor: not-allowed; } .button-loading { color: transparent; } .button-full-width { width: 100%; } /* Loading Spinner */ .loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.25em; height: 1.25em; border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent; animation: spin 0.75s linear infinite; } @keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }