.button {
    font: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 24px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border 0.2s;
    outline: none;
    user-select: none;
    width: 100%;
}

.primary {
    background: #1694F7;
}

// .primary:hover:not(:disabled) {
//     background: #2176bd;
// }

.secondary {
    background: #f3f4f6;
}

// .secondary:hover:not(:disabled) {
//     background: #e5e7eb;
// }

.outline {
    background: #fff;
    border: 1.5px solid #3490ec;
}

// .outline:hover:not(:disabled) {
//     background: #f0f8ff;
// }

.ghost {
    background: transparent;
}

// .ghost:hover:not(:disabled) {
//     background: #f0f8ff;
// }

.sm {
    padding: 0px 16px;
    min-height: 35px;
}

.md {
    padding: 10px 20px;
}

.lg {
    padding: 14px 28px;
}

.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}