.btn.ccp-button-secondary {
    color: var(--bs-gray-700);
    background-color: var(--bs-white);

    &:hover {
        background-color: var(--bs-gray-100);
        color: var(--bs-gray-800);
    }

    & i {
        color: var(--bs-gray-600);
    }

    &:hover i {
        color: var(--bs-gray-700);
    }

    &:disabled {
        color: var(--bs-gray-500);
        border: var(--bs-border-width) var(--bs-border-style) var(--bs-gray-200) !important;
    }

}

.btn.ccp-button-tertiary {
    color: var(--bs-gray-700);
    background-color: var(--bs-white);

    &:hover {
        background-color: var(--bs-gray-200);
        color: var(--bs-gray-700);
    }

    & i {
        color: var(--bs-gray-600);
    }

    &:disabled {
        color: var(--bs-gray-500);
    }

}

.ccp-btn-link {
    color: var(--bs-primary);
    padding: 0;
    border: none;
    background-color: transparent;

    &:hover {
        color: var(--bs-primary-active);
    }

    & i {
        color: var(--bs-primary);
    }

    &:hover i {
        color: var(--bs-primary-active);
        text-decoration: none;
    }

    &:hover .message-text {
        text-decoration: underline;
    }

    &:disabled {
        color: var(--bs-gray-500);
    }

    &:disabled i {
        color: var(--bs-gray-500);
    }

}

.btn.btn-primary:disabled,
.btn.btn-danger:disabled {
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-300);
    color: var(--bs-gray-500);

    & i {
        color: var(--bs-gray-500);
    }

}

.btn.button-medium {
    height: 2.5rem;
}

.btn.btn-outline.text-btn-addon {
    color: var(--bs-gray-700);
}

.close-ccp {
    width: 2.5rem;
    height: 2.5rem;
}

.border-300 {
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-gray-300) !important;
}