@media screen and (min-width: 480px) {
    // ion-app {
    //     width: 480px;
    //     margin: 0 calc((100vw - 480px) / 2);
    // }
}
:root {
    --van-button-small-height: 34px;
    --van-button-small-font-size: 14px;
    --van-button-primary-background: #7968fb;
    --van-button-primary-border-color: #7968fb;
    --van-primary-color: #7968fb;
    --van-button-normal-font-size: 16px;
    --van-button-default-height: 40px;
}
.van-theme-dark .van-empty {
    opacity: 1;
}
ion-back-button {
    --icon-font-size: 20px;
    --icon-margin-start: 6px;
    --icon-margin-end: 4px;
    font-weight: bold;
}
ion-content {
    &::-webkit-scrollbar {
        display: none;
        scrollbar-width: none;
    }
}
ion-toast.info-toast {
    --background: var(--ion-color-step-800);
    --color: var(--ion-color-light);
}
ion-toast.success-toast {
    --background: var(--ion-color-success);
    --color: var(--ion-color-light);
}
ion-toast.error-toast {
    --background: var(--ion-color-danger);
    --color: var(--ion-color-light);
}

ion-toolbar {
    --border-style: none;
    --background: #161616;
    ion-back-button {
        --color: #ffffff;
    }
    ion-button {
        --color: #ffffff;
    }
}
ion-refresher {
    --color: var(--ion-color-step-400);
}
ion-button {
    --border-radius: 4px;
}
ion-modal {
    --backdrop-opacity: 0.8;
}
ion-backdrop {
    opacity: 0.9;
}
ion-modal.dialog {
    --width: fit-content;
    --height: fit-content;
    --border-radius: 6px;
    --box-shadow: 0 2px 6px rgba(var(--ion-color-light-contrast-rgb), 0.05);
}
.refresher-pulling-icon {
    color: var(--ion-color-step-400) !important;
}
// .van-button--primary {
//     background: @primary-gradient;
//     color: #000000;
//     border: none;
// }
// .van-button--plain {
//     background: transparent;
//     --van-button-primary-background: #39f3bb;
// }
.van-button {
    --van-button-normal-font-size: 14px;
}
.gt {
    background: @primary-gradient;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.product-tag {
    color: #9f8dff;
    line-height: 16px;
    font-size: 10px;
    padding: 0 4px;
    background: fade(#9f8dff, 20);
    margin-right: 10px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--ion-color-step-0) inset !important;
}
input:-webkit-autofill {
    -webkit-text-fill-color: var(--ion-text-color) !important;
}
.eruda-console-container {
    padding-bottom: 54px !important;
    .eruda-js-input {
        height: 54px !important;
        padding-bottom: 30px !important;
        &.eruda-active {
            height: 100% !important;
        }
    }
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.popup-enter-active,
.popup-leave-active {
    transition: transform 0.3s ease;
}

.popup-enter-from,
.popup-leave-to {
    transform: translateY(100%);
}
