button.btn,
a.btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
}

a.btn {
    display: inline-flex;
}

button.btn.rounded,
a.btn.rounded {
    border-radius: 100%;
}

button.btn span,
button.btn svg path,
button.btn span svg path,
a.btn span,
a.btn svg path,
a.btn span svg path {
    color: var(--color-gray-100);
}

button.btn.btn-icon span,
button.btn.btn-icon svg path,
button.btn.btn-icon span svg path,
a.btn.btn-icon span,
a.btn.btn-icon svg path,
a.btn.btn-icon span svg path {
    color: var(--color-gray-600);
}

button.btn:hover span,
button.btn:hover svg path,
button.btn:hover span svg path,
a.btn:hover span,
a.btn:hover svg path,
a.btn:hover span svg path {
    color: white;
}

button.btn:focus,
a.btn:focus {
    outline: 4px solid var(--color-gray-300);
}

button.btn:not(.btn-icon),
a.btn:not(.btn-icon) {
    padding: 8px 15px;
    color: white;
    background: var(--color-gray-500);
}

button.btn:hover,
a.btn:hover {
    background: var(--color-gray-600);
}

button.btn.primary:not(.btn-icon),
a.btn.primary:not(.btn-icon) {
    background: var(--color-primary);
}

button.btn.primary:hover,
a.btn.primary:hover {
    background: var(--color-primary-500);
}

button.btn.primary:focus,
a.btn.primary:focus {
    outline: 4px solid var(--color-primary-300);
}

button.btn.error:not(.btn-icon),
a.btn.error:not(.btn-icon) {
    background: var(--color-error);
}

button.btn.error:hover,
a.btn.error:hover {
    background: var(--color-error-800);
}

button.btn.error:focus,
a.btn.error:focus {
    outline: 4px solid var(--color-error-600);
}

button.btn.warning:not(.btn-icon),
a.btn.warning:not(.btn-icon) {
    background: var(--color-warning);
}

button.btn.warning:hover,
a.btn.warning:hover {
    background: var(--color-warning-700);
}

button.btn.warning:focus,
a.btn.warning:focus {
    outline: 4px solid var(--color-warning-500);
}

button.btn.success:not(.btn-icon),
a.btn.success:not(.btn-icon) {
    background: var(--color-success);
}

button.btn.success:hover,
a.btn.success:hover {
    background: var(--color-success-700);
}

button.btn.success:focus,
a.btn.success:focus {
    outline: 4px solid var(--color-success-500);
}

button.btn.secondary:not(.btn-icon),
a.btn.secondary:not(.btn-icon) {
    background: var(--color-secondary);
}

button.btn.secondary:hover,
a.btn.secondary:hover {
    background: var(--color-secondary-900);
}

button.btn.secondary:focus,
a.btn.secondary:focus {
    outline: 4px solid var(--color-secondary-800);
}

button.btn:disabled:not(.btn-icon),
a.btn:disabled:not(.btn-icon) {
    background: var(--color-gray-300);
    color: var(--color-gray-500);
}