.btn { border-radius: .6rem; padding: .45rem .75rem; font-weight: 500; } .btn-sm, .btn-group-sm > .btn { padding: .25rem .5rem; border-radius: .4rem; } .btn-lg, .btn-group-lg > .btn { padding: .65rem 1rem; border-radius: .75rem; } .btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .btn-neutral, .btn-soft { --kp-button-bg: #ffffff; --kp-button-color: #52675b; --kp-button-border: #dce5df; --kp-button-hover: #f1f6f3; background-color: var(--kp-button-bg); color: var(--kp-button-color); border-color: var(--kp-button-border); } .btn-soft { --kp-button-bg: #edf6f0; --kp-button-color: #16764a; --kp-button-border: #d5e6da; --kp-button-hover: #dfefe5; } .btn-neutral:hover, .btn-neutral:focus, .btn-neutral:active, .btn-neutral.active, .btn-soft:hover, .btn-soft:focus, .btn-soft:active, .btn-soft.active { background-color: var(--kp-button-hover); color: var(--kp-button-color); border-color: var(--kp-button-border); } .btn-neutral:disabled, .btn-neutral.disabled, .btn-soft:disabled, .btn-soft.disabled { background-color: var(--kp-button-bg); color: var(--kp-button-color); border-color: var(--kp-button-border); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; padding: 0; flex-shrink: 0; } .btn-icon.btn-sm, .btn-group-sm > .btn-icon { width: 1.9375rem; height: 1.9375rem; padding: 0; } .btn-icon.btn-lg, .btn-group-lg > .btn-icon { width: 3rem; height: 3rem; padding: 0; } [data-bs-theme="dark"] .btn-neutral, [data-theme="dark"] .btn-neutral { --kp-button-bg: #1c2922; --kp-button-color: #d8e7de; --kp-button-border: #3b5043; --kp-button-hover: #293d31; } [data-bs-theme="dark"] .btn-soft, [data-theme="dark"] .btn-soft { --kp-button-bg: #243c2e; --kp-button-color: #8be0b0; --kp-button-border: #365841; --kp-button-hover: #30503c; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } }