/* UI Button Component Styles */
.ui-button {
    position: relative;
    overflow: hidden;
    border: none;
    outline: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 1px 2px 0 #1018280A;
}

/* Button Icon */
.ui-button-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
}

/* Button Text */
.ui-button-text {
    transition: opacity 0.3s ease;
}

/* Loading State */
.ui-button-loading {
    display: none;
    align-items: center;
    gap: 8px;
}

.ui-button.loading .ui-button-icon {
    opacity: 0;
}

.ui-button.loading .ui-button-loading {
    display: flex;
}

/* Loading Animation */
.ui-button-loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*          Button Variants             */
/* Primary */
.ui-button.btn-primary {
    background-color: var(--primary);
    color: #fff;
}

.ui-button.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-600);
}

.ui-button.btn-primary:active:not(:disabled),
.ui-button.btn-primary:focus:not(:disabled){
    background-color: var(--primary-700) !important;
}

/* Outline Primary */
.ui-button.btn-outline-primary {
    border: 1px solid var(--primary);
    color: var(--primary);
    background-color: transparent;
}

.ui-button.btn-outline-primary:hover:not(:disabled) {
    background-color: var(--primary-50);
    color: var(--primary);
}

.ui-button.btn-outline-primary:active:not(:disabled),
.ui-button.btn-outline-primary:focus:not(:disabled){
    background-color: var(--primary-100) !important;
    color: var(--primary);
}

/* Ghost Primary */
.ui-button.btn-ghost-primary {
    background-color: var(--primary-100);
    color: var(--primary);
}

.ui-button.btn-ghost-primary:hover:not(:disabled) {
    background-color: var(--primary-200);
}

.ui-button.btn-ghost-primary:active:not(:disabled),
.ui-button.btn-ghost-primary:focus:not(:disabled){
    background-color: var(--primary-300) !important;
}

/* Foreground */
.ui-button.btn-foreground {
    background-color: var(--background);
    border: 1px solid var(--border);
    color: var(--foreground);
}

.ui-button.btn-foreground:hover:not(:disabled) {
    background-color: var(--gray-50);
}

.ui-button.btn-foreground:active:not(:disabled),
.ui-button.btn-foreground:focus:not(:disabled){
    background-color: var(--gray-100) !important;
}

/* Link Primary */
.ui-button.btn-link-primary {
    background-color: transparent !important;
    color: var(--primary);
    box-shadow: none;
    border: none !important;
}

.ui-button.btn-link-primary:hover:not(:disabled) {
    color: var(--primary-600);
}

.ui-button.btn-link-primary:active:not(:disabled),
.ui-button.btn-link-primary:focus:not(:disabled){
    color: var(--primary-700);
}

/* Link Foreground */
.ui-button.btn-link-foreground {
    background-color: transparent !important;
    color: var(--foreground);
    box-shadow: none;
    border: none !important;
}

.ui-button.btn-link-foreground:hover:not(:disabled) {
    color: var(--gray-500);
}

.ui-button.btn-link-foreground:active:not(:disabled),
.ui-button.btn-link-foreground:focus:not(:disabled){
    color: var(--gray-400);
}

/* Link Tertiary */
.ui-button.btn-link-tertiary {
    background-color: transparent !important;
    color: var(--foreground-tertiary);
    box-shadow: none;
    border: none !important;
}

.ui-button.btn-link-tertiary:hover:not(:disabled) {
    color: var(--gray-600);
}

.ui-button.btn-link-tertiary:active:not(:disabled),
.ui-button.btn-link-tertiary:focus:not(:disabled){
    color: var(--gray-700);
}

/* Link Danger */
.ui-button.btn-link-danger {
    background-color: transparent !important;
    color: var(--danger);
    box-shadow: none;
    border: none !important;
}

.ui-button.btn-link-danger:hover:not(:disabled) {
    color: var(--danger-600);
}

.ui-button.btn-link-danger:active:not(:disabled),
.ui-button.btn-link-danger:focus:not(:disabled){
    color: var(--danger-700);
}

/* Danger */
.ui-button.btn-danger {
    background-color: var(--danger);
    color: #fff;
}

.ui-button.btn-danger:hover:not(:disabled) {
    background-color: var(--danger-600);
}

.ui-button.btn-danger:active:not(:disabled),
.ui-button.btn-danger:focus:not(:disabled){
    background-color: var(--danger-700) !important;
}

/* Outline Danger */
.ui-button.btn-outline-danger {
    border: 1px solid var(--border-danger);
    color: var(--danger);
    background-color: transparent;
}

.ui-button.btn-outline-danger:hover:not(:disabled) {
    background-color: var(--danger-50);
}

.ui-button.btn-outline-danger:active:not(:disabled),
.ui-button.btn-outline-danger:focus:not(:disabled) {
    color: var(--danger);
    background-color: var(--danger-100);
}

/* Ghost Danger */
.ui-button.btn-ghost-danger {
    background-color: var(--danger-100);
    color: var(--danger);
}

.ui-button.btn-ghost-danger:hover:not(:disabled) {
    background-color: var(--danger-200);
}

.ui-button.btn-ghost-danger:active:not(:disabled),
.ui-button.btn-ghost-danger:focus:not(:disabled){
    background-color: var(--danger-300) !important;
}

/*          Button Sizes             */
.ui-button.btn-block {
    width: 100%;
}

.ui-button.btn-sm {
    padding: 8px 12px;
}

.ui-button.btn-md {
    padding: 10px 16px;
}

.ui-button.btn-lg {
    padding: 12px 20px;
}

.ui-button.btn-xl {
    padding: 16px 24px;
}

/* Disabled State */
.ui-button:disabled,
.ui-button.disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: var(--disabled) !important;
    border: 1px solid var(--border) !important;
    color: var(--gray-200) !important;
}

/* Social Button Styles */
.ui-button.social-btn {
    font-weight: 500;
    padding: 14px 20px;
    border-radius: 6px;
}

.ui-button.social-btn .ui-button-icon {
    font-size: 16px;
}

/*          Icon Button          */
.ui-button.icon-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    width: 36px;
    font-size: 20px;
    border-radius: 8px;
}

.ui-button.icon-btn.rounded {
    border-radius: 50%;
}

.ui-button.icon-btn.btn-sm {
    height: 36px;
    width: 36px;
}

.ui-button.icon-btn.btn-md {
    height: 40px;
    width: 40px;
}

.ui-button.icon-btn.btn-lg {
    height: 46px;
    width: 46px;
}

.ui-button.icon-btn.btn-lg {
    height: 56px;
    width: 56px;
}

/* Dark Theme Support */

/* Ghost Primary */
body.dark-mode .ui-button.btn-ghost-primary {
    background-color: var(--gray-100);
    color: var(--primary);
}

body.dark-mode .ui-button.btn-ghost-primary:hover:not(:disabled) {
    background-color: var(--gray-200);
}

body.dark-mode .ui-button.btn-ghost-primary:active:not(:disabled),
body.dark-mode .ui-button.btn-ghost-primary:focus:not(:disabled){
    background-color: var(--gray-300) !important;
}

/* Outline Primary */
body.dark-mode .ui-button.btn-outline-primary:hover:not(:disabled) {
    color: var(--primary);
    background-color: var(--gray-100);
}

body.dark-mode .ui-button.btn-outline-primary:active:not(:disabled),
body.dark-mode .ui-button.btn-outline-primary:focus:not(:disabled) {
    color: var(--primary);
    background-color: var(--gray-50) !important;
}

/* Ghost Danger */
body.dark-mode .ui-button.btn-ghost-danger {
    background-color: var(--gray-100);
    color: var(--danger);
}

body.dark-mode .ui-button.btn-ghost-danger:hover:not(:disabled) {
    background-color: var(--gray-200);
}

body.dark-mode .ui-button.btn-ghost-danger:active:not(:disabled),
body.dark-mode .ui-button.btn-ghost-danger:focus:not(:disabled){
    background-color: var(--gray-300) !important;
}

/* Outline Danger */
body.dark-mode .ui-button.btn-outline-danger:hover:not(:disabled) {
    color: var(--danger);
    background-color: var(--gray-100);
}

body.dark-mode .ui-button.btn-outline-danger:active:not(:disabled),
body.dark-mode .ui-button.btn-outline-danger:focus:not(:disabled) {
    color: var(--danger);
    background-color: var(--gray-50) !important;
}

/* Responsive Design */
@media (max-width: 576px) {
    .ui-button {
        padding: 10px 16px;
        font-size: 13px;
    }

    .ui-button.social-btn {
        padding: 12px 16px;
    }
}