/**=====================
    Button scss
==========================**/
.btn {
    font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
    padding: 10px calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
    letter-spacing: 1px;
    line-height: 1.5;
    gap: 4px;
    white-space: nowrap;
    width: 100%;
    transition: all 0.2s ease-in-out;
    border-radius: 6px;
    @include flex_common;

    &.btn-solid,
    &.btn-solid:active {
        background-color: var(--theme-color);
        color: $white;
        border-color: var(--theme-color);

        i {
            --Iconsax-Size: 20px;
            --Iconsax-Color: #ffffff;
        }

        &:hover {
            background-color: transparent;
            color: var(--theme-color);

            i {
                --Iconsax-Color: var(--theme-color);
            }
        }
    }

    &.btn-outline {
        border: 1px solid var(--theme-color);
        color: var(--theme-color);

        i {
            --Iconsax-Size: 20px;
            --Iconsax-Color: var(--theme-color);
        }
    }

    &.btn-fill {
        border: transparent;
        color: $white;
        background-color: var(--theme-color);

        i {
            --Iconsax-Size: 20px;
            --Iconsax-Color: #ffffff;
        }
    }

    &.btn-solid-gray {
        background-color: $section-bg;
        color: $title-color;

    }

    &.btn-dark-solid {
        background-color: $title-color;
        color: $white;

        &:hover {
            background-color: transparent;
            border-color: $title-color;
            color: $title-color;
        }
    }

    &:focus {
        box-shadow: none;
    }

    &.disabled {
        background-color: $border-color;
        color: $light-color;
        font-weight: 500;
    }

    &.btn-solid-danger {
        background-color: $danger-color;
        color: $white;

        i {
            --Iconsax-Size: 20px;
            --Iconsax-Color: #ffffff;
        }
    }

    &.btn-solid-success {
        background-color: $success-color;
        color: $white;

        i {
            --Iconsax-Size: 20px;
            --Iconsax-Color: #ffffff;
        }
    }
}

.badge {
    font-size: 14px;
    font-weight: 500;
    border-radius: 15px;
}

/* outline buttons */
@each $text-name,
$text-color in (primary, $primary-color),
(secondary, $secondary-color),
(success, $success-color),
(danger, $danger-color),
(info, $info-color),
(light, $light-color),
(title, $title-color),
(warning, $warning-color) {
    .text-#{$text-name} {
        color: $text-color !important;
    }
}

/* badge background */
@each $badge-name,
$badge-color in (primary, $primary-color),
(secondary, $secondary-color),
(success, $success-color),
(danger, $danger-color),
(info, $info-color),
(light, $light-color),
(title, $title-color),
(pending, $pending-color),
(accepted, $accepted-color),
(assigned, $assigned-color),
(on-the-way, $on-the-way-color),
(decline, $decline-color),
(accepted, $accepted-color),
(cancel, $cancel-color),
(on-going, $on-going-color),
(on-hold, $on-hold-color),
(cancel, $cancel-color),
(start-again, $start-again-color),
(completed, $completed-color),
(pending-approval, $pending-approval-color),
(title, $title-color),
(warning, $warning-color) {
    .#{$badge-name}-badge {
        color: $white !important;
        background-color: $badge-color !important;
    }
}

/* badge light background */
@each $badge-name,
$badge-color in (secondary, $secondary-color),
(success, $success-color),
(danger, $danger-color),
(info, $info-color),
(light, $light-color),
(title, $title-color),
(pending, $pending-color),
(accepted, $accepted-color),
(assigned, $assigned-color),
(on-the-way, $on-the-way-color),
(decline, $decline-color),
(accepted, $accepted-color),
(cancel, $cancel-color),
(on-going, $on-going-color),
(on-hold, $on-hold-color),
(cancel, $cancel-color),
(start-again, $start-again-color),
(completed, $completed-color),
(pending-approval, $pending-approval-color),
(warning, $warning-color) {
    .#{$badge-name}-light-badge {
        color: $badge-color !important;
        background-color: rgba($badge-color, 0.10) !important;
    }
}

.primary-light-badge {
    color: var(--theme-color) !important;
    position: relative;
    z-index: 0;
    overflow: hidden;

    &::before {
        @include pos;
        top: 0;
        left: 0;
        @include pseudowh;
        background-color: var(--theme-color);
        opacity: 0.1;
    }
}

.dark-btn {
    body.dark & {
        .sun-icon{
            display: block;
        }
        .moon-icon{
            display: none;
        }
    }
   .sun-icon{
    display: none;
   }
}