.tbr_btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: auto;
    height: 40px;
    padding: 4px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.5s;
    border-width: 1px;
    border-style: solid;
    outline: none !important;
    transition: all 0.5s !important;
}

.tbr_btn.tbr_btn__sm {
    height: 34px;
    padding: 2px 12px;
    font-size: 12px;
}

.tbr_btn.tbr_btn__xs {
    height: 28px;
    padding: 2px 8px;
    font-size: 11px;
}

/* Solid button */
.tbr_btn.tbr_btn__default {
    color: var(--color-white);
    background-color: var(--color-default-500);
    border-color: var(--color-default-500);
}

.tbr_btn.tbr_btn__default svg .tbr_dynamic {
    fill: var(--color-white);
}

.tbr_btn.tbr_btn__primary {
    color: var(--color-white);
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.tbr_btn.tbr_btn__primary svg .tbr_dynamic {
    fill: var(--color-white);
}

.tbr_btn.tbr_btn__secondary {
    color: var(--color-white);
    background-color: var(--color-secondary-900);
    border-color: var(--color-secondary-900);
}

.tbr_btn.tbr_btn__secondary svg .tbr_dynamic {
    fill: var(--color-white);
}

.tbr_btn.tbr_btn__success {
    color: var(--color-white);
    background-color: var(--color-success-500);
    border-color: var(--color-success-500);
}

.tbr_btn.tbr_btn__success svg .tbr_dynamic {
    fill: var(--color-white);
}

.tbr_btn.tbr_btn__warning {
    color: var(--color-white);
    background-color: var(--color-warning-500);
    border-color: var(--color-warning-500);
}

.tbr_btn.tbr_btn__warning svg .tbr_dynamic {
    fill: var(--color-white);
}

.tbr_btn.tbr_btn__danger {
    color: var(--color-white);
    background-color: var(--color-danger-500);
    border-color: var(--color-danger-500);
}

.tbr_btn.tbr_btn__danger svg .tbr_dynamic {
    fill: var(--color-white);
}

.tbr_btn.tbr_btn__purple {
    color: var(--color-white);
    background-color: var(--color-purple-500);
    border-color: var(--color-purple-500);
}

.tbr_btn.tbr_btn__purple svg .tbr_dynamic {
    fill: var(--color-white);
}

.tbr_btn.tbr_btn__transparent {
    color: var(--color-default-500);
    background-color: transparent;
    border-color: transparent;
}

/* Outline button */
.tbr_btn.tbr_btn__outline_default {
    color: var(--color-default-500);
    border-color: var(--color-rgba-default-200);
    background-color: var(--color-rgba-default-100);
}

.tbr_btn.tbr_btn__outline_default svg .tbr_dynamic {
    fill: var(--color-default-500);
}

.tbr_btn.tbr_btn__outline_primary {
    color: var(--color-primary-500);
    border-color: var(--color-rgba-primary-200);
    background-color: var(--color-rgba-primary-100);
}

.tbr_btn.tbr_btn__outline_primary svg .tbr_dynamic {
    fill: var(--color-primary-500);
}

.tbr_btn.tbr_btn__outline_secondary {
    color: var(--color-secondary-900);
    border-color: var(--color-rgba-secondary-200);
    background-color: var(--color-rgba-secondary-100);
}

.tbr_btn.tbr_btn__outline_secondary svg .tbr_dynamic {
    fill: var(--color-secondary-900);
}

.tbr_btn.tbr_btn__outline_success {
    color: var(--color-success-500);
    border-color: var(--color-rgba-success-200);
    background-color: var(--color-rgba-success-100);
}

.tbr_btn.tbr_btn__outline_success svg .tbr_dynamic {
    fill: var(--color-success-500);
}

.tbr_btn.tbr_btn__outline_warning {
    color: var(--color-warning-500);
    border-color: var(--color-rgba-warning-200);
    background-color: var(--color-rgba-warning-100);
}

.tbr_btn.tbr_btn__outline_warning svg .tbr_dynamic {
    fill: var(--color-warning-500);
}

.tbr_btn.tbr_btn__outline_danger {
    color: var(--color-danger-500);
    border-color: var(--color-rgba-danger-200);
    background-color: var(--color-rgba-danger-100);
}

.tbr_btn.tbr_btn__outline_danger svg .tbr_dynamic {
    fill: var(--color-danger-500);
}

.tbr_btn.tbr_btn__outline_purple {
    color: var(--color-purple-500);
    border-color: var(--color-rgba-purple-200);
    background-color: var(--color-rgba-purple-100);
}

.tbr_btn.tbr_btn__outline_purple svg .tbr_dynamic {
    fill: var(--color-purple-500);
}

/* Button icon */
.tbr_btn.tbr_btn__icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 8px;
}

.tbr_btn.tbr_btn__icon_lg {
    width: 56px;
    min-width: 56px;
    height: 56px;
    padding: 16px;
}

.tbr_btn.tbr_btn__icon_sm {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 4px;
}

.tbr_btn.tbr_btn__icon_xs {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 2px;
}

/* Icon button sizes */
.tbr_btn.tbr_btn__icon_lg svg {
    width: 24px;
    height: 24px;
}

.tbr_btn svg,
.tbr_btn.tbr_btn__icon svg {
    width: 22px;
    height: 22px;
}

.tbr_btn.tbr_btn__sm svg,
.tbr_btn.tbr_btn__icon_sm svg {
    width: 20px;
    height: 20px;
}

.tbr_btn.tbr_btn__xs svg,
.tbr_btn.tbr_btn__icon_xs svg {
    width: 18px;
    height: 18px;
}

/* Disable and readonly button */
.tbr_btn:disabled,
.tbr_btn[readonly],
.tbr_btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hover solid button */
.tbr_btn.tbr_btn__default:hover,
.tbr_btn.tbr_btn__default:focus,
.tbr_btn.tbr_btn__default:active,
.tbr_btn.tbr_btn__outline_default:hover,
.tbr_btn.tbr_btn__outline_default:focus,
.tbr_btn.tbr_btn__outline_default:active {
    background-color: var(--color-default-500);
    border-color: var(--color-default-500);
    color: var(--color-white);
    box-shadow: 
        0 14px 26px -12px rgba(126, 130, 153, 0.6), 
        0 4px 23px 0 rgba(126, 130, 153, 0.15), 
        0 8px 10px -5px rgba(126, 130, 153, 0.2);
}

.tbr_btn.tbr_btn__primary:hover,
.tbr_btn.tbr_btn__primary:focus,
.tbr_btn.tbr_btn__primary:active,
.tbr_btn.tbr_btn__outline_primary:hover,
.tbr_btn.tbr_btn__outline_primary:focus,
.tbr_btn.tbr_btn__outline_primary:active {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: var(--color-white);
    box-shadow: 
        0 14px 26px -12px rgba(5, 131, 210, 0.6), 
        0 4px 23px 0 rgba(5, 131, 210, 0.15), 
        0 8px 10px -5px rgba(5, 131, 210, 0.2);
}

.tbr_btn.tbr_btn__secondary:hover,
.tbr_btn.tbr_btn__secondary:focus,
.tbr_btn.tbr_btn__secondary:active,
.tbr_btn.tbr_btn__outline_secondary:hover,
.tbr_btn.tbr_btn__outline_secondary:focus,
.tbr_btn.tbr_btn__outline_secondary:active {
    background-color: var(--color-secondary-900);
    border-color: var(--color-secondary-900);
    color: var(--color-white);
    box-shadow: 
        0 14px 26px -12px rgba(30, 50, 73, 0.6), 
        0 4px 23px 0 rgba(30, 50, 73, 0.15), 
        0 8px 10px -5px rgba(30, 50, 73, 0.2);
}

.tbr_btn.tbr_btn__success:hover,
.tbr_btn.tbr_btn__success:focus,
.tbr_btn.tbr_btn__success:active,
.tbr_btn.tbr_btn__outline_success:hover,
.tbr_btn.tbr_btn__outline_success:focus,
.tbr_btn.tbr_btn__outline_success:active {
    background-color: var(--color-success-500);
    border-color: var(--color-success-500);
    color: var(--color-white);
    box-shadow: 
        0 14px 26px -12px rgba(38, 158, 146, 0.6), 
        0 4px 23px 0 rgba(38, 158, 146, 0.15), 
        0 8px 10px -5px rgba(38, 158, 146, 0.2);
}

.tbr_btn.tbr_btn__warning:hover,
.tbr_btn.tbr_btn__warning:focus,
.tbr_btn.tbr_btn__warning:active,
.tbr_btn.tbr_btn__outline_warning:hover,
.tbr_btn.tbr_btn__outline_warning:focus,
.tbr_btn.tbr_btn__outline_warning:active {
    background-color: var(--color-warning-500);
    border-color: var(--color-warning-500);
    color: var(--color-white);
    box-shadow: 
        0 14px 26px -12px rgba(255, 168, 0, 0.6), 
        0 4px 23px 0 rgba(255, 168, 0, 0.15), 
        0 8px 10px -5px rgba(255, 168, 0, 0.2);
}

.tbr_btn.tbr_btn__danger:hover,
.tbr_btn.tbr_btn__danger:focus,
.tbr_btn.tbr_btn__danger:active,
.tbr_btn.tbr_btn__outline_danger:hover,
.tbr_btn.tbr_btn__outline_danger:focus,
.tbr_btn.tbr_btn__outline_danger:active {
    background-color: var(--color-danger-500);
    border-color: var(--color-danger-500);
    color: var(--color-white);
    box-shadow: 
        0 14px 26px -12px rgba(239, 48, 94, 0.6), 
        0 4px 23px 0 rgba(239, 48, 94, 0.15), 
        0 8px 10px -5px rgba(239, 48, 94, 0.2);
}

.tbr_btn.tbr_btn__purple:hover,
.tbr_btn.tbr_btn__purple:focus,
.tbr_btn.tbr_btn__purple:active,
.tbr_btn.tbr_btn__outline_purple:hover,
.tbr_btn.tbr_btn__outline_purple:focus,
.tbr_btn.tbr_btn__outline_purple:active {
    background-color: var(--color-purple-500);
    border-color: var(--color-purple-500);
    color: var(--color-white);
    box-shadow: 
        0 14px 26px -12px rgba(114, 57, 234, 0.6), 
        0 4px 23px 0 rgba(114, 57, 234, 0.15), 
        0 8px 10px -5px rgba(114, 57, 234, 0.2);
}

.tbr_btn[class*="tbr_btn__outline_"] svg .tbr_dynamic,
.tbr_btn[class*="tbr_btn__outline_"] svg path {
    transition: all .5s;
}

.tbr_btn[class*="tbr_btn__outline_"]:hover svg .tbr_dynamic,
.tbr_btn[class*="tbr_btn__outline_"]:focus svg .tbr_dynamic,
.tbr_btn[class*="tbr_btn__outline_"]:hover svg path,
.tbr_btn[class*="tbr_btn__outline_"]:focus svg path {
    fill: var(--color-white);
}