@matchain/matchid-sdk-react 0.1.56-alpha.8 → 0.1.56-alpha.9

package/dist/index.css

@@ -0,0 +1,2294 @@
+* {
+    box-sizing: border-box;
+}
+
+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: 24px;
+
+    /* @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-privacy-policy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+
+        .matchid-privacy-policy-content {
+            width: 100%;
+            text-align: center;
+            font-size: 14px;
+            color: var(--matchid-gray-600);
+            font-weight: 400;
+            padding: 0 24px;
+            line-height: 17px;
+
+            .matchid-privacy-policy-content-link {
+                color: var(--matchid-highlight-orange);
+                text-decoration: underline;
+                cursor: pointer;
+            }
+        }
+
+        .matchid-privacy-policy-powered-by {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 16px;
+            font-weight: 500;
+            color: var(--matchid-gray-350);
+        }
+    }
+
+    .matchid-login-other {
+        width: 100%;
+        gap: 16px;
+        display: flex;
+        flex-direction: column;
+        margin-top: 12px;
+
+        .matchid-login-other-line-box {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .matchid-login-other-text {
+            position: relative;
+            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-other-line {
+            flex-grow: 1;
+            height: 1px;
+            background-color: var(--matchid-line);
+            opacity: 0.5;
+        }
+
+        .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: 683px;
+        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;
+            align-items: flex-start;
+        }
+
+        .matchid-login-panel-header-title {
+            color: var(--matchid-login-panel-title-color, #000000);
+            font-size: 18px;
+            font-weight: 600;
+            text-align: left;
+
+            @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;
+    }
+
+}