/*=====================
 button css start
==========================*/
button {
    cursor: pointer;

    &:focus {
        outline: none;
    }

    &:disabled {
        cursor: not-allowed;
    }
}

.btn {
    font-size: $btn-font-size;
    padding: $btn-padding;
    border-radius: 6px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    --Iconsax-Size: 20px;
    --Iconsax-Color: #fff;

    &:focus {
        box-shadow: none !important;
    }

    &.btn-secondary {
        background-color: $secondary-color;
        border: 1px solid $secondary-color;

        &:active,
        &:focus {
            background-color: $secondary-color;
            border: 1px solid $secondary-color;
            box-shadow: none;
        }

        .cancel {
            background-color: rgba($dark-color, 0.04);
            color: rgba($dark-color, 0.8);
        }

        span {
            color: $white !important;
            font-size: 14px !important;
        }

        &.deleteConfirmationBtn {
            display: flex;
            align-items: center;
            gap: 6px;
        }
    }

    &.btn-gray {
        background-color: rgba($dark-color, 0.04);
        border: 1px solid rgba($dark-color, 0.01);
        color: rgba($dark-color, 0.8);

        &:focus {
            background-color: rgba($dark-color, 0.04);
            border: 1px solid rgba($dark-color, 0.01);
            color: rgba($dark-color, 0.8);
        }
    }
}

.trash-icon-btn {
    color: #ff4b4b;
    font-size: calc(20px + (22 - 20) * ((100vw - 320px) / (1920 - 320))) !important;
    line-height: 1;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 1px solid #ff4b4b;
    border-radius: 6px;

    &:hover,
    &:active {
        background-color: #ff4b4b;
        color: $white !important;
    }
}

.add-body {
    right: 0;
    position: absolute;
    top: 0;
}

.btn-close {
    &:focus {
        box-shadow: none;
    }
}

.edit-button {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-left: auto;
    margin-top: 24px;
}

.btn-popup {
    a {
        background-color: var(--primary-color);
        color: $white;
        display: flex;
        align-items: center;
        gap: 6px;

        &.btn {
            &:hover {
                color: $white;
                background-color: var(--primary-color);
            }
        }
    }

    i {
        --Iconsax-Size: 19px;
        --Iconsax-Color: White;
    }
}

.credit,
.debit {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px !important;

    input {
        background-color: transparent;
        border: none;
        box-shadow: none;
        color: $white;
        font-size: 14px;
    }

    svg {
        width: 20px;
        height: 20px;
    }
}

.clear-btn {
    padding: 5px 11px;
    font-size: 13px;
    font-weight: 500;
    background-color: rgba($danger-color, 0.1);
    color: $danger-color !important;
    border-color: rgba($danger-color, 0.5) !important;

    &:hover {
        background-color: $danger-color;
        color: $white !important;
        border-color: $danger-color !important;
    }
}

.btn-primary {
    background-color: var(--primary-color) !important;
    color: $white !important;
    border: 1px solid transparent !important;

    &:hover {
        background-color: transparent !important;
        color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }
}

.cancel-btn {
    background-color: rgba($dark-color, 0.04);
    border: 1px solid rgba($dark-color, 0.01);
    border-radius: 6px;
    font-size: 14px;
    padding: calc(7px + 2*(100vw - 320px) / 1600) calc(14px + 6*(100vw - 320px) / 1600);
    color: rgba($dark-color, 0.8);
}

.delete-confirmation-btn {
    background-color: #ff4b4b;
    color: $white;
    border: 1px solid #ff4b4b;

    &:hover {
        background-color: transparent;
        color: #ff4b4b;
        border: 1px solid #ff4b4b;

        span {
            color: #ff4b4b !important;
        }
    }

    span {
        color: $white !important;
    }
}

/**=====================
 Button CSS end
==========================**/