.btn {
    border: none;
    font-weight: 500;
    line-height: 150%;
    border-radius: 4px;
    letter-spacing: .008em;
    padding: 0.5rem 0.75rem;
}

.btn:focus-visible {
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

.btn-primary {
    color: var(--primary-color-50);
    background-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-color-700);
}

.btn-primary:active, .btn-primary.show {
    background-color: var(--primary-color-800) !important;
}

.btn-primary:focus, .btn-primary:focus-visible {
    background-color: var(--primary-color-700);
}

.btn-primary:disabled {
    color: var(--primary-color-50) !important;
    background-color: var(--primary-color) !important;
}

.btn-primary svg {
    fill: var(--primary-color-50);
}

.btn-secondary {
    color: var(--primary-color);
    background-color: var(--primary-color-100);
}

.btn-secondary:hover {
    color: var(--primary-color-700);
    background-color: var(--primary-color-200);
}

.btn-secondary:active {
    color: var(--primary-color-800) !important;
    background-color: var(--primary-color-300) !important;
}

.btn-secondary:focus, .btn-secondary:focus-visible {
    color: var(--primary-color-700);
    background-color: var(--primary-color-200);
}

.btn-secondary:disabled {
    color: var(--primary-color) !important;
    background-color: var(--primary-color-100) !important;
}

.btn-secondary svg {
    fill: var(--primary-color);
}

.btn-secondary:active svg {
    fill: var(--primary-color-800);
}

.btn-secondary:hover svg, .btn-secondary:focus svg, .btn-secondary:focus-visible svg {
    fill: var(--primary-color-700);
}

.btn-tertiary {
    color: var(--primary-color-800);
    background-color: var(--gray-shade-200);
}

.btn-tertiary:hover {
    color: var(--primary-color-900);
    background-color: var(--gray-shade-300);
}

.btn-tertiary:active {
    color: var(--primary-color-950) !important;
    background-color: var(--gray-shade-400) !important;
}

.btn-tertiary:focus, .btn-tertiary:focus-visible {
    color: var(--primary-color-900);
    background-color: var(--gray-shade-300);
}

.btn-link {
    color: var(--primary-color);
    text-decoration-line: none;
}

.btn-link:hover {
    color: var(--primary-color-700);
    background-color: var(--primary-color-50);
}

.btn-link:active {
    color: var(--primary-color-800) !important;
    background-color: var(--primary-color-100) !important;
}

.btn-link:focus, .btn-link:focus-visible {
    color: var(--primary-color-700);
    background-color: var(--primary-color-50);
}

.btn-delete {
    color: var(--danger-600);
}

.btn-delete:hover {
    color: var(--danger-700);
    background-color: var(--danger-50);
}

.btn-delete:active {
    color: var(--danger-800) !important;
    background-color: var(--danger-100) !important;
}

.btn-delete:focus, .btn-delete:focus-visible {
    color: var(--danger-700);
    background-color: var(--danger-50);
}

.btn-warning {
    color: var(--warning-50);
    background-color: var(--warning-600);
}

.btn-warning:hover {
    color: var(--warning-100);
    background-color: var(--warning-700);
}

.btn-warning:active {
    color: var(--warning-200) !important;
    background-color: var(--warning-800) !important;
}

.btn-warning:focus, .btn-warning:focus-visible {
    color: var(--warning-100);
    background-color: var(--warning-700);
}

.btn-danger {
    color: var(--danger-50);
    background-color: var(--danger-600);
}

.btn-danger:hover {
    color: var(--danger-100);
    background-color: var(--danger-700);
}

.btn-danger:active {
    color: var(--danger-200) !important;
    background-color: var(--danger-800) !important;
}

.btn-danger:focus, .btn-danger:focus-visible {
    color: var(--danger-100);
    background-color: var(--danger-700);
}

.btn-info {
    color: var(--info-50);
    background-color: var(--info-600);
}

.btn-info:hover {
    color: var(--info-100);
    background-color: var(--info-700);
}

.btn-info:active {
    color: var(--info-200) !important;
    background-color: var(--info-800) !important;
}

.btn-info:focus, .btn-info:focus-visible {
    color: var(--info-100);
    background-color: var(--info-700);
}

.btn-icon {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: var(--spacing-xxs);
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

.underlined-link {
    color: var(--primary-color-600);
    text-decoration-line: underline;
}

.underlined-link:hover {
    color: var(--primary-color-700);
}

.underlined-link:active {
    color: var(--primary-color-800);
}

.underlined-link:focus, .underlined-link:focus-visible {
    color: var(--primary-color-700);
}

.btn-claims-success {
    color: var(--success-900);
    background-color: var(--success-200);
}

.btn-claims-success:hover {
    color: var(--success-900);
    background-color: var(--success-300);
}

.btn-claims-success:active {
    color: var(--success-950) !important;
    background-color: var(--success-400) !important;
}

.btn-claims-success:focus, .btn-claims-success:focus-visible {
    color: var(--success-900);
    background-color: var(--success-300);
}