@matchain/matchid-sdk-react 0.1.56-alpha.5 → 0.1.56-alpha.7

package/dist/index.css

@@ -1,2131 +0,0 @@
-body {
-    /**value**/
-    --matchid-light-orange: #FFF3EB;
-    --matchid-highlight-orange: #FC802D;
-    --matchid-highlight-orange-light: rgba(252, 128, 45, 0.5);
-    --matchid-black: #000000;
-    --matchid-white: #FFFFFF;
-    --matchid-black-800: #1E1E1E;
-    --matchid-gray-600: #6E6E6E;
-    --matchid-gray-400: #B6B6B6;
-    --matchid-gray-350: #D3D3D3;
-    --matchid-gray-350-light: rgba(211, 211, 211, 0.5);
-    --matchid-gray-300: #E3E3E3;
-    --matchid-gray-200: #F3F3F3;
-    --matchid-gray-100: #F8F8F8;
-    --matchid-red-600: #F7585E;
-    --matchid-green-600: #2CBF68;
-    --matchid-secondary-grey: var(--matchid-gray-600);
-    --matchid-light-grey: var(--matchid-gray-100);
-    --matchid-disabled: var(--matchid-gray-350);
-    --matchid-success: #2FCC00;
-    --matchid-error: #F14141;
-    --matchid-link: #006FFF;
-
-    --matchid-shadow-full: 0px 15px 40px 0px rgba(22, 17, 46, 0.12);
-    --matchid-shadow-middle: 0px 10px 30px 0px rgba(22, 17, 46, 0.12);
-    --matchid-shadow-small: 0px 10px 20px 0px rgba(219, 219, 219, 0.50);
-    /**root component**/
-    --matchid-placeholder-color: var(--matchid-gray-400);
-
-    --matchid-line: var(--matchid-gray-300);
-    --matchid-arrow-color: var(--matchid-black);
-    --matchid-text-color: var(--matchid-black);
-    --matchid-round: 12px;
-    --matchid-round-lg: 24px;
-    --matchid-padding-lg: 32px;
-    /**login component**/
-    --matchid-login-method-border-color: var(--matchid-line);
-    --matchid-login-method-hover-border-color: var(--matchid-highlight-orange);
-    --matchid-login-method-arrow-color: var(--matchid-arrow-color);
-    --matchid-login-method-round: var(--matchid-round);
-    --matchid-login-method-color: var(--matchid-text-color);
-
-    --matchid-login-other-color: var(--matchid-gray-600);
-
-    --matchid-login-recommend-wallet-color: var(--matchid-black);
-    --matchid-login-recommend-wallet-hover-color: var(--matchid-white);
-    --matchid-login-recommend-wallet-hover-bg: var(--matchid-highlight-orange);
-
-
-    --matchid-login-panel-divide-color: var(--matchid-line);
-    --matchid-login-panel-title-color: var(--matchid-text-color);
-    --matchid-login-panel-subtitle-color: var(--matchid-gray-600);
-
-    /**overlay component**/
-    --matchid-overlay-index: 9999;
-    --matchid-overlay-color: var(--matchid-black);
-    /**modal component**/
-    --matchid-modal-bg: var(--matchid-white);
-    --matchid-modal-shadow: var(--matchid-shadow-full);
-    --matchid-modal-border-color: var(--matchid-white);
-    --matchid-modal-round: var(--matchid-round-lg);
-    --matchid-modal-padding: var(--matchid-padding-lg);
-    --matchid-mobile-modal-padding: 20px;
-
-    --matchid-modal-header-border-color: var(--matchid-line);
-    --matchid-modal-header-color: var(--matchid-text-color);
-    /**input component**/
-    --matchid-input-border-color: var(--matchid-line);
-    --matchid-input-focus-border-color: var(--matchid-highlight-orange);
-    --matchid-input-color: var(--matchid-text-color);
-    --matchid-input-placeholder-color: var(--matchid-placeholder-color);
-    --matchid-input-bg: var(--matchid-gray-100);
-    --matchid-input-focus-bg: var(--matchid-light-orange);
-    --matchid-input-delete-icon-color: var(--matchid-highlight-orange);
-    /**field component**/
-    --matchid-field-color: var(--matchid-text-color);
-    --matchid-field-error-color: var(--matchid-red-600);
-    --matchid-field-required-color: #E60808;
-    /**popover component**/
-    --matchid-popover-bg: var(--matchid-white);
-    /**button component**/
-    --matchid-btn-border-color: var(--matchid-black);
-    --matchid-btn-color: var(--matchid-black);
-    --matchid-btn-bg: var(--matchid-white);
-
-    --matchid-btn-disabled-bg: var(--matchid-gray-350);
-    --matchid-btn-disabled-color: var(--matchid-white);
-
-    --matchid-btn-hover-bg: var(--matchid-black-800);
-    --matchid-btn-hover-color: var(--matchid-white);
-
-    --matchid-btn-active-bg: linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.06) 100%), #1E1E1E;
-    --matchid-btn-active-color: var(--matchid-white);
-
-    --matchid-btn-highlight-bg: var(--matchid-black);
-    --matchid-btn-highlight-color: var(--matchid-white);
-
-    --matchid-btn-loading-bg: var(--matchid-black-800);
-    --matchid-btn-loading-color: var(--matchid-white);
-
-    --matchid-login-btn-text-color: var(--matchid-black);
-    --matchid-login-btn-icon-color: var(--matchid-black);
-    --matchid-login-btn-border-color: var(--matchid-black);
-    --matchid-login-btn-bg-color: none;
-    --matchid-login-btn-hover-text-color: var(--matchid-black);
-    --matchid-login-btn-hover-icon-color: var(--matchid-highlight-orange);
-    --matchid-login-btn-hover-border-color: var(--matchid-highlight-orange);
-    --matchid-login-btn-hover-bg-color: none;
-    --matchid-login-btn-active-text-color: var(--matchid-black);
-    --matchid-login-btn-active-icon-color: var(--matchid-highlight-orange);
-    --matchid-login-btn-active-border-color: var(--matchid-highlight-orange);
-    --matchid-login-btn-active-bg-color: var(--matchid-white);
-
-
-    --matchid-email-verify-header-value-color: var(--matchid-highlight-orange);
-    --matchid-email-verify-header-value-tips: var(--matchid-gray-600);
-    /****/
-    --matchid-valid-error-color: var(--matchid-gray-600);
-    --matchid-valid-success-color: var(--matchid-black);
-    --matchid-password-header-color: var(--matchid-black);
-    --matchid-user-popover-color: var(--matchid-black);
-    --matchid-user-popover-hover-color: var(--matchid-highlight-orange);
-    /**switch**/
-    --matchid-switch-bg: var(--matchid-gray-350);
-    --matchid-switch-ball: var(--matchid-white);
-    --matchid-switch-checked-bg: var(--matchid-highlight-orange);
-    --matchid-switch-disabled-bg: var(--matchid-gray-350-light);
-    --matchid-switch-disabled-checked-bg: var(--matchid-highlight-orange-light);
-    --matchid-swicth-loading-color: var(--matchid-white);
-    /**avatar**/
-    --matchid-avatar-bg: var(--matchid-gray-350);
-    --matchid-avatar-color: var(--matchid-gray-600);
-    /**radio**/
-    --matchid-radio-line: var(--matchid-gray-300);
-    --matchid-radio-checked: var(--matchid-highlight-orange);
-    /**matchid-wallet-asset**/
-    --matchid-wallet-asset-bg: var(--matchid-white);
-    --matchid-wallet-asset-color: var(--matchid-black);
-    /**matchid-transaction-list**/
-    --matchid-wallet-transaction-bg: var(--matchid-white);
-    --matchid-wallet-transaction-color: var(--matchid-black);
-    /**tab**/
-    --matchid-tab-color: var(--matchid-secondary-grey);
-    --matchid-tab-active-color: var(--matchid-highlight-orange);
-
-
-}
-
-.matchid-login-box {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    gap: 64px;
-    @media screen and (max-width: 768px) {
-        gap: 48px;
-    }
-
-    .matchid-login-recommend-list {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        gap: 16px;
-        @media screen and (max-width: 768px) {
-            gap: 12px;
-        }
-
-        .matchid-login-recommend-method {
-            width: 100%;
-            position: relative;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-            border-radius: var(--matchid-login-method-round, 12px);
-            border: 1px solid var(--matchid-login-method-border-color, #E3E3E3);
-
-            &:hover {
-                border-color: var(--matchid-login-method-hover-border-color, #FC802D);
-            }
-
-            .matchid-login-recommend-method-item {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                gap: 16px;
-                height: 72px;
-                width: 100%;
-                padding: 16px;
-                cursor: pointer;
-                color: var(--matchid-login-method-color, #000000);
-                @media screen and (max-width: 768px) {
-                    height: 56px;
-                    padding: 10px 16px;
-                }
-
-                .matchid-login-recommend-method-content {
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: center;
-                    gap: 8px;
-                    font-size: 16px;
-                    font-weight: 600;
-                    @media screen and (max-width: 768px) {
-                        gap: 12px
-                    }
-                }
-
-                .matchid-login-recommend-method-arrow {
-                    transition: all 0.3s;
-
-                    &.matchid-login-recommend-method-arrow-active {
-                        transform: rotate(180deg);
-                    }
-                }
-            }
-
-            .matchid-login-recommend-method-popover {
-                display: none;
-                width: 100%;
-                padding: 0 16px 16px;
-                flex-direction: column;
-
-                &.matchid-login-recommend-method-popover-active {
-                    display: flex;
-                }
-
-                .matchid-login-recommend-wallet-divider {
-                    height: 1px;
-                    width: 100%;
-                    background: var(--matchid-line);
-                }
-
-                .matchid-login-recommend-wallet-list {
-                    margin-top: 16px;
-                    display: flex;
-                    flex-direction: column;
-                    gap: 8px;
-                    width: 100%;
-                    @media screen and (max-width: 768px) {
-                        margin-top: 10px;
-                    }
-
-                    .matchid-login-recommend-wallet-item {
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-                        gap: 16px;
-                        height: 56px;
-                        border-radius: 8px;
-                        font-size: 16px;
-                        font-weight: 600;
-                        @media screen and (max-width: 768px) {
-                            height: 48px;
-                        }
-
-                        color: var(--matchid-login-recommend-wallet-color, #000000);
-                        cursor: pointer;
-                        padding: 0 16px;
-
-                        .matchid-login-recommend-wallet-item-content {
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-                            gap: 8px;
-
-                            .matchid-login-recommend-wallet-item-hover-icon {
-                                display: none;
-                            }
-                        }
-
-                        &:hover {
-                            background: var(--matchid-login-recommend-wallet-hover-bg, #FC802D);
-                            color: var(--matchid-login-recommend-wallet-hover-color, #FFF);
-                            --matchid-arrow-color: var(--matchid-login-recommend-wallet-hover-color, #FFF);
-
-                            .matchid-login-recommend-wallet-item-hover-icon {
-                                display: block;
-                            }
-
-                            .matchid-login-recommend-wallet-item-icon {
-                                display: none;
-                            }
-
-                        }
-                    }
-                }
-            }
-
-        }
-    }
-
-    .matchid-login-other {
-        width: 100%;
-        gap: 16px;
-        display: flex;
-        flex-direction: column;
-
-        .matchid-login-other-text {
-            text-align: center;
-            font-size: 14px;
-            color: var(--matchid-login-other-color, #6E6E6E);
-            font-weight: 400;
-            @media screen and (max-width: 768px) {
-                font-size: 12px;
-            }
-        }
-
-        .matchid-login-method-box {
-            display: grid;
-            padding: 16px;
-            gap: 16px 16px;
-            grid-template-columns: repeat(5, 1fr);
-
-            .matchid-login-method-item {
-                cursor: pointer;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
-        }
-    }
-}
-
-
-.matchid-login-panel {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    @media screen and (max-width: 768px) {
-        gap: 16px;
-    }
-
-    .matchid-login-panel-box {
-        max-height: 500px;
-        overflow-y: auto;
-
-        &::-webkit-scrollbar {
-            width: 8px;
-            background-color: #D3D3D3;
-            border-radius: 4px;
-        }
-    }
-
-    .matchid-login-panel-divide {
-        height: 1px;
-        width: 100%;
-        background-color: var(--matchid-login-panel-divide-color, #E3E3E3);
-    }
-
-    .matchid-login-panel-header {
-        display: flex;
-        width: 100%;
-        justify-content: space-between;
-        align-items: center;
-
-        .matchid-login-panel-header-content {
-            display: flex;
-            gap: 4px;
-            flex-direction: column;
-        }
-
-        .matchid-login-panel-header-title {
-            color: var(--matchid-login-panel-title-color, #000000);
-            font-size: 18px;
-            font-weight: 600;
-            @media screen and (max-width: 768px) {
-                font-size: 16px;
-            }
-        }
-
-        .matchid-login-panel-header-subtilte {
-            color: var(--matchid-login-panel-subtitle-color, #6E6E6E);
-            font-size: 14px;
-            font-weight: 400;
-            line-height: 120%;
-            @media screen and (max-width: 768px) {
-                font-size: 12px;
-            }
-        }
-
-        .matchid-login-panel-header-close {
-            cursor: pointer;
-        }
-    }
-
-}
-
-.matchid-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: var(--matchid-overlay-index);
-    overflow: hidden;
-    backdrop-filter: blur(2px);
-    background: rgba(0, 0, 0, .3);
-    color: var(--matchid-overlay-color);
-    @media screen and (max-width: 768px) {
-        align-items: center;
-    }
-}
-
-.matchid-modal {
-    border-radius: var(--matchid-modal-round, 24px);
-    border: 1px solid var(--matchid-modal-border-color, #FFF);
-    background: var(--matchid-modal-bg, #FFF);
-    box-shadow: var(--matchid-modal-shadow, 0px 15px 40px 0px rgba(22, 17, 46, 0.12));
-    width: 480px;
-    max-width: 90vw;
-    padding: var(--matchid-modal-padding, 32px);
-    @media screen and (max-width: 768px) {
-        width: calc(100vw - 20px);
-        max-width: calc(100vw - 20px);
-        padding: var(--matchid-mobile-modal-padding, 20px);
-        padding-top: 0px;
-        .matchid-modal-mobile-header {
-            width: 44px;
-            height: 5px;
-            border-radius: 3px;
-            background: var(--matchid-line);
-            margin: 8px auto 21px;
-        }
-    }
-
-    .matchid-modal-header {
-        padding-bottom: 24px;
-        height: 54px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        @media screen and (max-width: 768px) {
-            height: 38px;
-            padding-bottom: 16px;
-            margin-bottom: 16px;
-        }
-
-        &.matchid-modal-header-border {
-            border-bottom: 1px solid var(--matchid-modal-header-border-color, #E3E3E3);
-            margin-bottom: 24px;
-        }
-
-        .matchid-modal-header-back, .matchid-modal-header-close {
-            cursor: pointer;
-        }
-
-        .matchid-modal-header-content {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-
-            .matchid-modal-header-title {
-                color: var(--matchid-modal-header-color, #000);
-                font-size: 20px;
-                font-weight: 500;
-                @media screen and (max-width: 768px) {
-                    font-size: 16px;
-                    font-weight: 500;
-                }
-            }
-        }
-    }
-
-
-}
-
-
-.matchid-input-box {
-    width: 100%;
-    height: 72px;
-    padding-left: 24px;
-    padding-right: 24px;
-    border-radius: 12px;
-    position: relative;
-    border: 1px solid var(--matchid-input-border-color);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--matchid-input-bg);
-    gap: 24px;
-    @media screen and (max-width: 768px) {
-        height: 48px;
-        padding-left: 16px;
-        padding-right: 16px;
-    }
-
-    &:active, &:focus, &:focus-within {
-        border-color: var(--matchid-input-focus-border-color);
-        background: var(--matchid-input-focus-bg);
-    }
-
-    &.matchid-input-has-content {
-        background: var(--matchid-input-focus-bg);
-    }
-
-
-    .matchid-input-field{
-        flex: 1;
-        height: 100%;
-        outline: 0;
-        color: var(--matchid-input-color);
-        font-size: 18px;
-        font-weight: 500;
-        background: none;
-        min-width: 0;
-        border:0;
-        @media screen and (max-width: 768px) {
-            font-size: 16px;
-            font-weight: 500;
-        }
-
-        &::placeholder {
-            color: var(--matchid-input-placeholder-color);
-            font-weight: 300;
-        }
-
-        &:active, &:focus {
-            outline: 0;
-        }
-    }
-
-    .matchid-input-eye-icon {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        width: 20px;
-        flex-shrink: 1;
-        @media screen and (max-width: 768px) {
-            width: 16px;
-        }
-    }
-
-    .matchid-input-delete-icon {
-        opacity: 0;
-        cursor: pointer;
-        width: 20px;
-        flex-shrink: 1;
-        @media screen and (max-width: 768px) {
-            width: 16px;
-        }
-    }
-
-    &:focus-within {
-        .matchid-input-delete-icon {
-            opacity: 1;
-        }
-    }
-    .matchid-input-length{
-        color:var(--matchid-gray-400);
-        --icon-color: var(--matchid-gray-400);
-        position: absolute;
-        bottom:8px;
-        right:8px;
-        display: flex;
-        align-items: flex-end;
-        gap:4px;
-        font-size:18px;
-        @media screen and (max-width: 768px) {
-            font-size:14px;
-        }
-    }
-    &:active, &:focus, &:focus-within {
-        .matchid-input-length{
-            color:var(--matchid-highlight-orange);
-            --icon-color: var(--matchid-highlight-orange);
-        }
-    }
-
-    &.matchid-input-textarea{
-        height:auto;
-        padding:24px;
-        .matchid-input-field{
-            line-height: 24px;
-            height:24px;
-            max-height: calc(24px * var(--max-rows));
-            resize: none;
-            overflow: auto;
-        }
-    }
-}
-
-.matchid-field-box {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    @media screen and (max-width: 768px) {
-        gap: 8px;
-    }
-
-    .matchid-field-label {
-        color: var(--matchid-field-color);
-        font-size: 18px;
-        font-weight: 500;
-        @media screen and (max-width: 768px) {
-            font-size: 14px;
-            font-weight: 500;
-        }
-
-        .matchid-field-required {
-            color: var(--matchid-field-required-color);
-        }
-    }
-
-    .matchid-field-error {
-        font-size: 14px;
-        font-weight: 400;
-        color: var(--matchid-field-error-color);
-    }
-}
-
-
-.matchid-btn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    border-radius: 12px;
-    outline: 0;
-    cursor: pointer;
-    border: 1px solid var(--matchid-btn-border-color);
-    color: var(--matchid-btn-color);
-    background: var(--matchid-btn-bg);
-}
-
-.matchid-btn:not(:disabled):hover {
-    background: var(--matchid-btn-hover-bg);
-    color: var(--matchid-btn-hover-color);
-    box-shadow: var(--matchid-shadow-middle);
-    border-color: var(--matchid-btn-hover-bg);
-}
-
-.matchid-btn:focus {
-    background: var(--matchid-btn-active-bg);
-    color: var(--matchid-btn-active-color);
-    box-shadow: var(--matchid-shadow-middle);
-    border-color: var(--matchid-btn-active-bg);
-}
-
-
-.matchid-btn-highlight, .matchid-btn-highlight:hover, .matchid-btn-highlight:focus, .matchid-btn-highlight:not(:disabled):hover {
-    background: var(--matchid-btn-highlight-bg);
-    color: var(--matchid-btn-highlight-color);
-    border: 0;
-}
-
-.matchid-btn:disabled {
-    cursor: not-allowed;
-    background: var(--matchid-btn-disabled-bg);
-    color: var(--matchid-btn-disabled-color);
-    border-width: 0px;
-}
-
-.matchid-btn-loading {
-    background: var(--matchid-btn-loading-bg) !important;
-    color: var(--matchid-btn-loading-color) !important;
-    cursor: not-allowed;
-}
-
-.matchid-btn-loading-icon {
-    animation: spin 2s linear infinite;
-
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.matchid-btn-sm {
-    height: 28px;
-    font-size: 14px;
-    padding: 0 16px;
-}
-
-.matchid-btn-df {
-    height: 40px;
-    font-size: 18px;
-    padding: 0 16px;
-}
-
-.matchid-btn-lg {
-    height: 52px;
-    font-size: 20px;
-    padding: 0 48px;
-}
-
-.matchid-btn-block {
-    width: 100%;
-}
-
-.matchid-btn-rounded {
-    border-radius: 100px;
-}
-
-@media screen and (max-width: 768px) {
-    .matchid-btn-sm {
-        height: 28px;
-        font-size: 12px;
-        padding: 0 16px;
-    }
-
-    .matchid-btn-df {
-        height: 40px;
-        font-size: 16px;
-        padding: 0 16px;
-        gap: 8px
-    }
-
-    .matchid-btn-lg {
-        height: 48px;
-        font-size: 16px;
-        padding: 0 32px;
-    }
-}
-
-.matchid-email-verify-box, .matchid-password-box {
-    display: flex;
-    flex-direction: column;
-    gap: 64px;
-    @media screen and (max-width: 768px) {
-        gap: 36px;
-    }
-
-    .matchid-email-verify-header, .matchid-password-header {
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        height: 40px;
-        @media screen and (max-width: 768px) {
-            gap: 12px;
-            height: 32px;
-        }
-
-        .matchid-email-verify-header-icon, .matchid-password-header-icon {
-            width: 40px;
-            height: 40px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 8px;
-            border: 1px solid var(--matchid-black);
-            @media screen and (max-width: 768px) {
-                width: 32px;
-                height: 32px;
-            }
-        }
-
-
-        .matchid-email-verify-header-content {
-            flex: 1;
-            display: flex;
-            height: 100%;
-            flex-direction: column;
-            justify-content: space-between;
-
-            .matchid-email-verify-header-value {
-                color: var(--matchid-email-verify-header-value-color);
-                font-size: 24px;
-                font-weight: 600;
-                line-height: 100%;
-                @media screen and (max-width: 768px) {
-                    font-size: 16px;
-                    font-weight: 500;
-                }
-            }
-
-            .matchid-email-verify-header-tips {
-                color: var(--matchid-email-verify-header-value-tips);
-                font-size: 14px;
-                line-height: 120%; /* 16.8px */
-                @media screen and (max-width: 768px) {
-                    font-size: 12px;
-                }
-            }
-        }
-
-        .matchid-password-header-content {
-            flex:1;
-            font-size: 14px;
-            color: var(--matchid-password-header-color);
-            @media screen and (max-width: 768px) {
-                font-size: 14px;
-            }
-        }
-    }
-}
-
-
-.matchid-unlogin-btn, .matchid-login-btn {
-    gap: 8px
-}
-
-.matchid-login-btn {
-    padding: 0 12px 0 4px;
-    background: var(--matchid-login-btn-bg-color);
-    color: var(--matchid-login-btn-text-color);
-    fill: var(--matchid-login-btn-icon-color);
-    border-color: var(--matchid-login-btn-border-color);
-}
-
-.matchid-login-btn:hover, .matchid-login-btn:not(:disabled):hover {
-    background: var(--matchid-login-btn-hover-bg-color);
-    color: var(--matchid-login-btn-hover-text-color);
-    fill: var(--matchid-login-btn-hover-icon-color);
-    border-color: var(--matchid-login-btn-hover-border-color);
-}
-
-.matchid-login-btn:focus,
-.matchid-login-btn:not(:disabled):focus {
-    box-shadow: var(--matchid-shadow-small);
-    background: var(--matchid-login-btn-active-bg-color);
-    color: var(--matchid-login-btn-active-text-color);
-    fill: var(--matchid-login-btn-active-icon-color);
-    border-color: var(--matchid-login-btn-active-border-color);
-}
-
-.matchid-login-btn-box {
-    position: relative;
-}
-
-.matchid-valid {
-    margin-top: 24px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    @media screen and (max-width: 768px) {
-        gap: 4px;
-    }
-
-    .matchid-valid-status-item {
-        display: flex;
-        font-size: 14px;
-        gap: 8px;
-        align-items: flex-start;
-        @media screen and (max-width: 768px) {
-            font-size: 12px;
-            line-height: normal;
-        }
-
-        span {
-            flex: 1;
-        }
-
-        color: var();
-
-        &.matchid-valid-status-success {
-            color: var(--matchid-valid-success-color);
-        }
-
-        &.matchid-valid-status-error {
-            color: var(--matchid-valid-error-color);
-        }
-    }
-}
-
-
-.matchid-password-content {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-}
-
-.matchid-popover-box {
-    position: relative;
-    display: inline-block;
-
-    .matchid-popover-area {
-        display: none;
-        position: absolute;
-        z-index: 100;
-
-        .matchid-popover-content {
-            background: var(--matchid-popover-bg);
-            box-shadow: var(--matchid-shadow-middle);
-            border-radius: 12px;
-            padding: 16px 0;
-            border: 1px solid var(--matchid-popover-bg);
-        }
-
-        .matchid-popover-content:hover {
-            border: 1px solid var(--matchid-highlight-orange);
-        }
-
-    }
-
-    &.matchid-popover-click-active {
-        .matchid-popover-area {
-            display: block;
-        }
-    }
-
-    &.matchid-popover-hover:hover {
-        .matchid-popover-area {
-            display: block;
-        }
-    }
-
-    &.matchid-popover-left {
-        .matchid-popover-area {
-            left: 0;
-            top: 100%;
-        }
-    }
-
-    &.matchid-popover-right {
-        .matchid-popover-area {
-            right: 0;
-            top: 100%;
-        }
-    }
-
-    &.matchid-popover-center {
-        .matchid-popover-area {
-            left: 50%;
-            top: 100%;
-            transform: translateX(-50%);
-        }
-    }
-}
-
-.matchid-user-popover-content {
-    padding: 0 12px;
-    display: flex;
-    width: 280px;
-    flex-direction: column;
-    gap: 32px;
-    font-size: 16px;
-
-    .matchid-user-popover-list {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        gap: 8px;
-
-        .matchid-user-popover-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            cursor: pointer;
-            gap: 8px;
-            height: 48px;
-            color: var(--matchid-user-popover-color);
-            --icon-color: var(--matchid-user-popover-color);
-
-            .matchid-user-popover-item-content {
-                display: flex;
-                gap: 8px;
-                align-items: center;
-            }
-
-            &:hover {
-                color: var(--matchid-user-popover-hover-color);
-                --icon-color: var(--matchid-user-popover-hover-color);
-
-            }
-
-        }
-    }
-}
-
-.matchid-user-popover-divider {
-    height: 1px;
-    width: 100%;
-    background: var(--matchid-line);
-}
-
-.matchid-wallet-container {
-    background: #ffffff;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    align-items: center;
-    justify-content: center;
-
-    .matchid-wallet-box {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-        align-items: center;
-        justify-content: center;
-        padding: 24px;
-
-        .matchid-wallet-content {
-            img {
-                width: 128px;
-                height: 128px;
-            }
-
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            color: #6E6E6E;
-            text-align: center;
-            font-size: 20px;
-            font-weight: 500;
-            line-height: 20px;
-        }
-    }
-
-}
-
-.matchid-email-verify-field {
-    padding-right: 0;
-}
-
-.matchid-cex-modal {
-    font-size: 14px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.matchid-drawer {
-
-    width: 416px;
-    height: 100vh;
-    padding: 24px 24px 0;
-    background: #FFFFFF;
-    display: flex;
-    gap: 48px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    transition: all 0.3s;
-    flex-direction: column;
-    border-left: 1px solid #D3D3D3;
-    box-shadow: -20px 0px 20px 0px rgba(22, 17, 46, 0.12);
-
-    .matchid-drawer-header {
-        font-size: 18px;
-        font-weight: 500;
-        padding-bottom: 24px;
-        border-bottom: 1px solid var(--matchid-line);
-
-        display: flex;
-        justify-content: space-between;
-
-        .matchid-drawer-header-content {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-        }
-
-        .matchid-drawer-header-close {
-            cursor: pointer;
-        }
-
-        .matchid-drawer-header-back {
-            cursor: pointer;
-        }
-    }
-}
-
-.matchid-hashpanel-header {
-    font-size: 16px;
-    font-weight: 500;
-    display: block;
-    @media screen and (min-width: 768px) {
-        display: none;
-    }
-}
-
-.matchid-hashpanel-box {
-    display: flex;
-    flex-direction: column;
-    gap: 36px;
-    align-items: center;
-    @media screen and (min-width: 768px) {
-        justify-content: space-between;
-        flex: 1;
-        padding-bottom: 120px;
-    }
-
-    .matchid-hashpanel-content {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-        align-items: center;
-        width: 100%;
-        @media screen and (min-width: 768px) {
-            gap: 48px;
-        }
-
-        .matchid-hashpanel-status {
-            font-size: 24px;
-            font-weight: 500;
-            display: none;
-            @media screen and (min-width: 768px) {
-                display: block;
-            }
-        }
-
-        .matchid-hashpanel-img {
-            width: 96px;
-            height: 96px;
-        }
-
-        .matchid-hashpanel-hash,.matchid-hashpanel-text {
-            width: 100%;
-            font-size: 14px;
-            word-break: break-all;
-            @media screen and (min-width: 768px) {
-                font-size: 16px;
-            }
-
-            a {
-                color: var(--matchid-link);
-                text-decoration: none;
-            }
-        }
-    }
-}
-
-.matchid-switch {
-    width: 64px;
-    height: 32px;
-    background-color: var(--matchid-switch-bg);
-    border-radius: 16px;
-    cursor: pointer;
-    position: relative;
-    transition: background-color 0.3s ease;
-
-    .matchid-switch-ball, .matchid-switch-loading-icon {
-        width: 24px;
-        height: 24px;
-        transition: transform 0.3s ease, left 0.3s, background-color 0.3s ease;
-        position: absolute;
-        left: 4px;
-        top: 4px;
-    }
-
-    .matchid-switch-ball {
-        background-color: var(--matchid-switch-ball);
-        border-radius: 50%;
-    }
-
-    &.matchid-switch-sm {
-        width: 48px;
-        height: 24px;
-        border-radius: 12px;
-
-        .matchid-switch-ball, .matchid-switch-loading-icon {
-            width: 18px;
-            height: 18px;
-            left: 3px;
-            top: 3px;
-        }
-    }
-
-    &.matchid-switch-checked {
-        background-color: var(--matchid-switch-checked-bg);
-
-        .matchid-switch-ball, .matchid-switch-loading-icon {
-            left: 36px;
-        }
-
-        &.matchid-switch-sm .matchid-switch-ball, .matchid-switch-sm .matchid-switch-loading-icon {
-            left: 27px;
-        }
-    }
-
-    &.matchid-switch-disabled, &.matchid-switch-loading {
-        cursor: not-allowed;
-        background-color: var(--matchid-switch-disabled-bg);
-
-        &.matchid-switch-checked {
-            background-color: var(--matchid-switch-disabled-checked-bg);
-        }
-    }
-
-    &.matchid-switch-loading {
-        .matchid-switch-loading-icon {
-            animation: spin 2s linear infinite;
-        }
-    }
-}
-
-.matchid-alpha-avatar {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    background: var(--matchid-avatar-bg);
-    color: var(--matchid-avatar-color);
-    font-weight: 500;
-}
-
-.matchid-radio {
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 100%;
-    border: 1px solid var(--matchid-radio-line);
-
-    &.matchid-radio-checked {
-        border-color: var(--matchid-radio-checked);
-
-        .matchid-radio-content {
-            background: var(--matchid-radio-checked);
-            border-radius: 100%;
-        }
-    }
-}
-
-.matchid-change-network-box {
-    display: flex;
-    flex-direction: column;
-    gap: 48px;
-    @media screen and (max-width: 768px) {
-        gap: 36px;
-    }
-
-    .matchid-change-network-list {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-        @media screen and (max-width: 768px) {
-            gap: 16px;
-        }
-
-        .matchid-change-network-item {
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            justify-content: space-between;
-            padding: 16px;
-            border: 1px solid var(--matchid-line);
-            border-radius: 16px;
-            transition: border-color 0.2s;
-            @media screen and (max-width: 768px) {
-                padding: 10px 16px;
-                border-radius: 12px;
-            }
-
-            &:hover, &.matchid-change-network-selected {
-                border-color: var(--matchid-highlight-orange);
-            }
-
-            .matchid-change-network-item-content {
-                display: flex;
-                align-items: center;
-                gap: 16px;
-                @media screen and (max-width: 768px) {
-                    gap: 8px;
-                }
-
-                .matchid-change-network-item-icon {
-                    width: 28px;
-                    height: 28px;
-                    border-radius: 8px;
-                    @media (min-width: 768px) {
-                        width: 40px;
-                        height: 40px;
-                    }
-                }
-
-                .matchid-change-network-item-name {
-                    font-size: 14px;
-                    font-weight: 500;
-                    @media (min-width: 768px) {
-                        font-size: 16px;
-                    }
-                }
-            }
-        }
-    }
-
-}
-
-.matchid-toast-box {
-    position: fixed;
-    top: 20px; /* 5 * 4px = 20px */
-    right: 20px; /* 5 * 4px = 20px */
-    display: flex;
-    flex-direction: column;
-    gap: 8px; /* space-y-2 -> 2 * 4px = 8px */
-
-    .matchid-toast {
-        display: flex;
-        align-items: center;
-        box-shadow: var(--matchid-shadow-small);
-        min-height: 40px;
-        padding: 10px 12px;
-        gap: 4px;
-        color: black;
-        background-color: white;
-        font-size: 14px;
-        border: 1px solid var(--matchid-line);
-        border-radius: 100px;
-        transform: scale(1);
-        transition: all 0.3s ease;
-    }
-}
-
-.matchid-receive-modal {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex: 1;
-    gap: 48px;
-    @media screen and (max-width: 768px) {
-        gap: 36px;
-    }
-
-    .matchid-receive-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 48px;
-        @media screen and (max-width: 768px) {
-            gap: 24px;
-        }
-
-        .matchid-receive-text {
-            font-size: 14px;
-            font-weight: 500;
-
-            @media (min-width: 768px) {
-                font-size: 16px;
-            }
-        }
-
-        .matchid-qr-container {
-            border: 2px solid var(--matchid-line);
-            border-radius: 12px;
-            padding: 16px;
-            @media screen and (max-width: 768px) {
-                padding: 10px;
-            }
-
-            .matchid-qr-code {
-                width: 148px;
-                height: 148px;
-                @media screen and (max-width: 768px) {
-                    width: 88px;
-                    height: 88px;
-                }
-            }
-        }
-
-        .matchid-receive-link {
-            text-align: center;
-            word-break: break-all;
-            color: var(--matchid-link);
-            font-size: 14px;
-            font-weight: 500;
-        }
-    }
-}
-
-.matchid-import-token {
-    display: flex;
-    flex-direction: column;
-    gap: 48px;
-    @media screen and (max-width: 768px) {
-        gap: 36px;
-    }
-
-    .matchid-import-token-form {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-        @media screen and (max-width: 768px) {
-            gap: 16px;
-        }
-    }
-}
-
-.matchid-wallet-asset-list {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    @media screen and (max-width: 768px) {
-        gap: 8px;
-    }
-
-    .matchid-wallet-asset-item {
-
-        background: var(--matchid-wallet-asset-bg);
-        color: var(--matchid-wallet-asset-color);
-        display: flex;
-        cursor: pointer;
-        gap: 8px;
-        align-items: center;
-        padding: 16px;
-        border: 1px solid var(--matchid-line);
-        border-radius: 16px;
-        @media screen and (max-width: 768px) {
-            padding: 10px 16px;
-        }
-
-        &:hover {
-            border-color: var(--matchid-highlight-orange);
-        }
-
-        .matchid-wallet-asset-logo {
-            position: relative;
-            height: 46px;
-            width: 42px;
-            display: flex;
-            align-items: center;
-            @media screen and (max-width: 768px) {
-                width: 36px;
-                height: 36px;
-            }
-
-            .matchid-wallet-asset-icon {
-                width: 40px;
-                height: 40px;
-                border-radius: 8px;
-                @media screen and (max-width: 768px) {
-                    width: 36px;
-                    height: 36px;
-                }
-            }
-
-            .matchid-wallet-asset-chain {
-                position: absolute;
-                border-radius: 100%;
-                width: 12px;
-                height: 12px;
-                right: 0px;
-                bottom: 1px;
-                @media screen and (max-width: 768px) {
-                    width: 10px;
-                    height: 10px;
-                }
-            }
-        }
-
-        .matchid-wallet-asset-info {
-            height: 46px;
-            display: flex;
-            flex: 1;
-            align-items: center;
-            justify-content: space-between;
-            gap: 10px;
-
-            @media screen and (max-width: 768px) {
-                height: 44px;
-            }
-
-            .matchid-wallet-asset-name {
-                font-size: 16px;
-                font-weight: 500;
-                flex: 1;
-                color: var(--matchid-black);
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                -webkit-box-orient: vertical;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                @media (max-width: 768px) {
-                    font-size: 14px;
-                }
-            }
-
-            .matchid-wallet-asset-content {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-                flex: 1;
-
-                .matchid-wallet-asset-price {
-                    font-size: 16px;
-                    font-weight: 500;
-                    color: var(--matchid-black);
-                    @media (max-width: 768px) {
-                        font-size: 14px;
-                    }
-                }
-
-                .matchid-wallet-asset-value {
-                    font-size: 14px;
-                    font-weight: 500;
-                    color: var(--matchid-gray-600);
-                }
-
-            }
-
-            .matchid-wallet-asset-footer {
-                flex: 1;
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-                align-items: end;
-
-                .matchid-wallet-asset-balance {
-                    font-size: 16px;
-                    font-weight: 500;
-                    color: var(--matchid-success);
-                    @media (max-width: 768px) {
-                        font-size: 14px;
-                    }
-                }
-
-                .matchid-wallet-asset-change {
-                    font-size: 14px;
-                    font-weight: 400;
-                }
-            }
-        }
-    }
-
-    .matchid-wallet-asset-down {
-        color: var(--matchid-error);
-    }
-
-    .matchid-wallet-asset-up {
-        color: var(--matchid-success);
-    }
-}
-
-.matchid-token-detail {
-    flex: 1;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    padding-bottom: 200px;
-    gap: 48px;
-
-    @media (max-width: 768px) {
-        padding-bottom: 0px;
-        gap: 36px;
-    }
-
-    .matchid-token-main {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-        align-items: center;
-
-        .matchid-token-info {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            align-items: center;
-
-            .matchid-token-logo {
-                position: relative;
-                width: 48px;
-                height: 48px;
-
-                .matchid-token-icon {
-                    width: 100%;
-                    height: 100%;
-                    border-radius: 100%
-                }
-
-                .matchid-token-chain {
-                    position: absolute;
-                    border-radius: 100%;
-                    width: 12px;
-                    height: 12px;
-                    right: 0px;
-                    bottom: 0px;
-                }
-            }
-
-            .matchid-token-name {
-                font-size: 20px;
-                font-weight: 500;
-                color: var(--matchid-black);
-                @media (max-width: 768px) {
-                    font-size: 16px;
-                }
-            }
-        }
-
-        .matchid-token-contract {
-            gap: 16px;
-            display: flex;
-            flex-direction: column;
-            padding: 16px;
-            background: var(--matchid-gray-100);
-            border-radius: 12px;
-            @media (max-width: 768px) {
-                gap: 8px;
-            }
-
-            .matchid-token-contract-title {
-                color: var(--matchid-black);
-                font-size: 16px;
-                font-weight: 500;
-                @media (max-width: 768px) {
-                    font-size: 14px;
-                }
-            }
-
-            .matchid-token-contract-address {
-                width: 100%;
-                word-break: break-all;
-                font-size: 14px;
-                color: var(--matchid-secondary-grey);
-                @media (max-width: 768px) {
-                    font-size: 12px;
-                }
-            }
-        }
-    }
-}
-
-.matchid-token-send-box {
-    flex: 1;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    padding-bottom: 200px;
-    gap: 40px;
-    @media (max-width: 768px) {
-        padding-bottom: 0px;
-        gap: 68px;
-    }
-
-    .matchid-token-send-content {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-
-        .matchid-token-amount-content, .matchid-token-address-content {
-            padding: 16px;
-            background: var(--matchid-light-grey);
-            border-radius: 16px;
-            display: flex;
-            gap: 16px;
-            flex-direction: column;
-            position: relative;
-        }
-
-        .matchid-token-amount-content {
-            .matchid-token-amount-transfer {
-                position: absolute;
-                left: 50%;
-                bottom: -20px;
-                transform: translateX(-50%);
-            }
-
-            .matchid-token-amount-header {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .matchid-token-amount-title {
-                    font-size: 16px;
-                    font-weight: 500;
-                    color: var(--matchid-black);
-                    @media (max-width: 768px) {
-                        font-size: 14px;
-                    }
-                }
-
-                .matchid-token-amount-chain {
-                    display: flex;
-                    align-items: center;
-                    gap: 4px;
-                    border-radius: 100px;
-                    padding: 4px 8px;
-                    background: var(--matchid-white);
-
-                    .matchid-token-amount-chain-icon {
-                        width: 16px;
-                        height: 16px;
-                        border-radius: 50%;
-                    }
-
-                    span {
-
-                        font-size: 12px;
-                        font-weight: 500;
-                        color: var(--matchid-black);
-                    }
-                }
-            }
-
-            .matchid-token-amount-footer {
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                font-size: 14px;
-                @media (max-width: 768px) {
-                    font-size: 12px;
-                }
-
-                .matchid-token-amount-title {
-                    font-weight: 300;
-                    color: var(--matchid-secondary-grey);
-                }
-
-                .matchid-token-amount-value {
-                    color: var(--matchid-black);
-                    font-weight: 500;
-                }
-            }
-        }
-
-        .matchid-token-address-content {
-            .matchid-token-address-header {
-                .matchid-token-address-title {
-                    font-size: 16px;
-                    font-weight: 500;
-                    color: var(--matchid-black);
-                    @media (max-width: 768px) {
-                        font-size: 14px;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.matchid-token-input-box {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .matchid-token-input {
-        width: 100%;
-        background: transparent;
-        font-size: 24px;
-        color: var(--matchid-black);
-        padding: 10px 0;
-        border: none;
-        font-weight: 600;
-        border-bottom: 1px solid var(--matchid-line);
-        caret-color: var(--matchid-black);
-        @media (max-width: 768px) {
-            font-size: 20px;
-        }
-
-        &::placeholder {
-            color: var(--matchid-disabled);
-            font-weight: 300;
-        }
-
-        &.matchid-token-input-error {
-            border-color: var(--matchid-highlight-orange);
-        }
-
-        &:focus {
-            outline: none;
-        }
-    }
-
-    &.matchid-token-input-sm {
-        .matchid-token-input {
-            font-size: 16px;
-            @media (max-width: 768px) {
-                font-size: 14px;
-            }
-        }
-    }
-
-    .matchid-token-input-error-text {
-        font-size: 12px;
-        color: var(--matchid-error);
-        font-weight: 500;
-    }
-}
-
-.matchid-token-send-list-box {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    gap: 48px;
-    overflow-y: scroll;
-    max-height: 70vh;
-
-
-    @media (max-width: 768px) {
-        padding-bottom: 0px;
-        gap: 36px;
-    }
-
-    .matchid-token-send-list {
-        display: flex;
-        flex-direction: column;
-        gap: 24px;
-        flex: 1;
-        overflow-y: scroll;
-        max-height: calc(70vh - 48px - 50px);
-        @media (max-width: 768px) {
-            max-height: calc(70vh - 48px - 38px);
-        }
-
-        .matchid-token-send-item {
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            justify-content: space-between;
-            padding: 16px;
-            border: 1px solid var(--matchid-line);
-            border-radius: 16px;
-            transition: border-color 0.2s;
-            @media (max-width: 768px) {
-                padding: 10px 16px;
-                border-radius: 12px;
-            }
-
-            &:hover, &.matchid-token-send-checked {
-                border-color: var(--matchid-highlight-orange);
-            }
-
-            .matchid-token-send-content {
-                display: flex;
-                align-items: center;
-                flex: 1;
-                gap: 16px;
-                @media (max-width: 768px) {
-                    gap: 8px;
-                }
-
-                .matchid-token-send-logo {
-                    width: 28px;
-                    height: 28px;
-                    position: relative;
-
-                    .matchid-token-send-icon {
-                        width: 100%;
-                        height: 100%;
-                        border-radius: 8px;
-                    }
-
-                    .matchid-token-send-chain {
-                        position: absolute;
-                        border-radius: 100%;
-                        width: 12px;
-                        height: 12px;
-                        right: -1px;
-                        bottom: -1px;
-                    }
-
-                    @media (min-width: 768px) {
-                        width: 40px;
-                        height: 40px;
-                    }
-                }
-
-                .matchid-token-send-info {
-                    font-size: 14px;
-                    font-weight: 500;
-                    display: flex;
-                    flex: 1;
-                    align-items: center;
-                    justify-content: space-between;
-                    gap: 10px;
-                    @media (min-width: 768px) {
-                        font-size: 16px;
-                    }
-                }
-            }
-        }
-    }
-
-}
-
-.matchid-rotate {
-    animation: spin 2s linear infinite;
-}
-
-.matchid-transaction-item {
-    padding: 16px;
-    display: flex;
-    justify-content: space-between;
-    border: 1px solid var(--matchid-line);
-    border-radius: 16px;
-    height: 78px;
-    background: var(--matchid-wallet-transaction-bg);
-    color: var(--matchid-wallet-transaction-color);
-    @media screen and (max-width: 768px) {
-        height: 64px;
-    }
-
-    &:hover {
-        border-color: var(--matchid-highlight-orange);
-    }
-
-    .matchid-transacton-item-container {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-
-        .matchid-transaction-item-icon {
-            background-color: var(--matchid-light-grey);
-            border-radius: 8px;
-            width: 40px;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            @media screen and (max-width: 768px) {
-                width: 36px;
-                height: 36px;
-            }
-
-            .rotate-180 {
-                transform: rotate(180deg);
-            }
-        }
-
-        .matchid-transaction-item-details {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-
-            .matchid-transaction-item-address {
-                font-size: 16px;
-                font-weight: 500;
-                color: black;
-                @media screen and (max-width: 768px) {
-                    font-size: 14px;
-                }
-
-            }
-
-            .matchid-transaction-item-timestamp {
-
-                font-size: 14px;
-                color: var(--matchid-secondary-grey);
-
-                @media screen and (max-width: 768px) {
-                    font-size: 12px;
-                }
-            }
-        }
-
-    }
-
-    .matchid-transaction-item-amount {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 16px;
-        font-weight: 500;
-
-        span {
-            text-align: right;
-        }
-
-        @media screen and (max-width: 768px) {
-            font-size: 14px;
-        }
-    }
-
-    .matchid-transaction-item-loading {
-        color: var(--matchid-black);
-    }
-
-    .matchid-transaction-item-success {
-        color: var(--matchid-success);
-    }
-
-    .matchid-transaction-item-error {
-        color: var(--matchid-error);
-    }
-
-}
-
-.matchid-transaction-list {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    @media screen and (max-width: 768px) {
-        gap: 8px;
-    }
-}
-
-.matchid-list-nomore {
-    gap: 8px;
-    text-align: center;
-    font-size: 16px;
-    padding: 16px 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--matchid-secondary-grey);
-    @media screen and (max-width: 768px) {
-        font-size: 14px;
-    }
-}
-
-.matchid-flex {
-    display: flex;
-}
-
-.matchid-import-token-result {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    padding-bottom: 100px;
-    gap: 24px;
-    justify-content: space-between;
-    @media screen and (max-width: 768px) {
-        padding-bottom: 0;
-        gap: 115px;
-    }
-
-    .matchid-import-token-result-box {
-        display: flex;
-        flex-direction: column;
-        gap: 48px;
-        align-items: center;
-        @media screen and (max-width: 768px) {
-            gap: 24px;
-        }
-
-        .matchid-import-token-result-img {
-            width: 96px;
-            height: 96px;
-        }
-
-        .matchid-import-token-result-text {
-            font-size: 24px;
-            font-weight: 500;
-            color: var(--matchid-success);
-            @media screen and (max-width: 768px) {
-                font-size: 18px;
-            }
-        }
-
-        .matchid-import-token-result-text-fail {
-            color: var(--matchid-error);
-        }
-    }
-
-}
-
-.matchid-error {
-    color: var(--matchid-red-600);
-}
-
-.matchid-skeleton {
-    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-    background-size: 200% 100%;
-    animation: matchid-loading 1.5s infinite;
-}
-
-@keyframes matchid-loading {
-    0% {
-        background-position: 200% 0;
-    }
-    100% {
-        background-position: -200% 0;
-    }
-}
-
-.matchid-nomore {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: 500;
-    font-size: 16px;
-    color: var(--matchid-secondary-grey);
-    padding: 20px 0;
-    @media screen and (max-width: 768px) {
-        font-size: 14px;
-    }
-}
-
-.matchid-tabs {
-    gap: 36px;
-    align-items: start;
-    display: flex;
-}
-
-.matchid-tab {
-    color: var(--matchid-tab-color);
-    font-weight: 500;
-    font-size: 20px;
-    cursor: pointer;
-
-    @media screen and (max-width: 768px) {
-        font-size: 14px;
-        padding: 10px 0;
-    }
-
-    &.matchid-tab-active {
-        color: var(--matchid-tab-active-color);
-        border-bottom: 2px solid var(--matchid-tab-active-color);
-    }
-}
-
-.matchid-cursor-pointer {
-    cursor: pointer;
-}
-
-.matchid-remove-box {
-    padding: 0px 20px;
-    min-width: 150px;
-    display: flex;
-    justify-content: center;
-}
-
-
-
-.matchid-w-full {
-    width: 100%;
-}
-
-.matchid-confirm-modal {
-    display: flex;
-    flex-direction: column;
-    font-size: 14px;
-    color: black;
-    gap: 8px;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-    @media (min-width: 768px) {
-        font-size: 16px;
-        gap: 12px;
-    }
-
-}
-