.btn {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 8px;

    --bs-btn-border-radius: 5px;

    --bs-btn-disabled-bg: rgb(var(--surface-100));
    --bs-btn-disabled-color: rgb(var(--surface-400));
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-opacity: 1;

    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
    transition: all 0.15s ease-in-out;
}

.btn[disabled] {
    background-color: var(--bs-btn-disabled-bg);
    color: var(--bs-btn-disabled-color);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
    cursor: default;
    pointer-events: none;
}

.btn-primary {
    --bs-btn-bg: rgb(var(--green-500));
    --bs-btn-color: rgb(var(--white));
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: rgb(var(--green-600));
    --bs-btn-hover-color: rgb(var(--white));
    --bs-btn-hover-border-color: transparent;
    min-width: 90px;
}

.btn-secondary {
    --bs-btn-bg: rgb(var(--button-clear));
    --bs-btn-color: rgb(var(--white));
    --bs-btn-hover-bg: #606C7E;
    --bs-btn-hover-color: rgb(var(--white));
    min-width: 90px;
}

.btn-third {
    --bs-btn-bg: rgb(var(--button-save));
    --bs-btn-color: rgb(var(--white));
    --bs-btn-hover-bg: #2F5A9A;
    --bs-btn-hover-color: rgb(var(--white));
    min-width: 90px;
}

.btn-add {
    --bs-btn-bg: rgb(var(--blue-500));
    --bs-btn-color: rgb(var(--blue-1100));
    --bs-btn-hover-bg: #4FBEE1;
    --bs-btn-hover-color: rgb(var(--blue-1100));
    min-width: 130px;
}

.btn-delete {
    --bs-btn-bg: rgb(var(--danger-400));
    --bs-btn-color: rgb(var(--white));
    --bs-btn-hover-bg: #E93445;
    --bs-btn-hover-color: rgb(var(--white));
    min-width: 90px;
}