@extends('component-base.layout')

@section('title')
    Badge
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/badge/badge.css?v={{config("sns-line.version")}}">
    <style>
        .demo-section {
            padding: 20px;
            background: white;
            border-radius: 10px;
        }
        .demo-section + .demo-section {
            margin-top: 20px;
        }
        .demo-label {
            font-weight: bold;
            margin-bottom: 15px;
        }
        .demo-row {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        .demo-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .demo-text-14 {
            font-size: 14px;
            color: #1F1F1F;
            line-height: 22px;
        }
        .demo-text-16 {
            font-size: 16px;
            color: #1F1F1F;
            line-height: 22px;
        }
    </style>
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        {{-- Count Badge (standalone) --}}
        <div class="demo-section">
            <div style="margin-bottom: 20px;font-weight: bold">Count</div>
            <div class="demo-row lme-items-center" style="width: fit-content;">
                <lme-badge type="count" :count="5"></lme-badge>
                <lme-badge type="count" :count="100"></lme-badge>
                <lme-badge type="count" :count="12"></lme-badge>
            </div>
        </div>

        {{-- Dot Badge (standalone) --}}
        <div class="demo-section">
            <div style="margin-bottom: 20px;font-weight: bold">Dot</div>
            <div class="demo-row lme-items-center" style="width: fit-content;">
                <lme-badge type="dot" dot-size="default"></lme-badge>
                <lme-badge type="dot" dot-size="large"></lme-badge>
            </div>
        </div>

        {{-- Icon + Dot --}}
        <div class="demo-section">
            <div style="margin-bottom: 20px;font-weight: bold">Icon + dot</div>
            <div class="demo-row">
                <lme-badge type="dot">
                    <span class="demo-icon">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7.9997 14.8752C7.03497 14.8752 6.2501 14.0899 6.2501 13.1247H2.8751C2.80612 13.1247 2.75 13.0686 2.75 12.9996V12.5001C2.75 12.2242 2.97448 11.9997 3.2504 11.9997H3.6248V6.6879C3.6248 5.62823 4.00835 4.6061 4.7048 3.80981C5.39448 3.02125 6.34282 2.50565 7.3751 2.358V1.7496C7.3751 1.40519 7.65529 1.125 7.9997 1.125C8.3446 1.125 8.6252 1.40519 8.6252 1.7496V2.358C9.65741 2.50564 10.6059 3.02159 11.2951 3.80981C11.9912 4.60603 12.3746 5.62816 12.3746 6.6879V11.9997H12.7499C13.0258 11.9997 13.2503 12.2242 13.2503 12.5001V12.9996C13.2503 13.0686 13.1942 13.1247 13.1252 13.1247H9.7502C9.7502 14.0895 8.96448 14.8752 7.9997 14.8752ZM7.25 13.1247C7.25 13.5386 7.58631 13.8753 7.9997 13.8753C8.41358 13.8753 8.7503 13.5386 8.7503 13.1247H7.25ZM7.9997 3.4371C7.13115 3.4371 6.31514 3.77526 5.702 4.3893C5.08796 5.00244 4.7498 5.81877 4.7498 6.6879V11.9997H11.2496V6.6879C11.2496 5.81909 10.9118 5.00276 10.2983 4.3893C9.68516 3.77526 8.86883 3.4371 7.9997 3.4371Z" fill="#1F1F1F"/>
                        </svg>
                    </span>
                </lme-badge>
                <lme-badge type="dot">
                    <span class="demo-icon">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.99966 16.7346C7.91434 16.7346 7.03136 15.8512 7.03136 14.7653H3.23449C3.15688 14.7653 3.09375 14.7022 3.09375 14.6246V14.0626C3.09375 13.7522 3.34629 13.4997 3.6567 13.4997H4.0779V7.52389C4.0779 6.33176 4.50939 5.18186 5.2929 4.28604C6.06879 3.39891 7.13567 2.81886 8.29699 2.65275V1.9683C8.29699 1.58084 8.6122 1.26562 8.99966 1.26562C9.38768 1.26562 9.70335 1.58084 9.70335 1.9683V2.65275C10.8646 2.81885 11.9316 3.39929 12.7069 4.28604C13.4901 5.18178 13.9214 6.33168 13.9214 7.52389V13.4997H14.3436C14.654 13.4997 14.9066 13.7522 14.9066 14.0626V14.6246C14.9066 14.7022 14.8435 14.7653 14.7659 14.7653H10.969C10.969 15.8507 10.085 16.7346 8.99966 16.7346ZM8.15625 14.7653C8.15625 15.2309 8.5346 15.6097 8.99966 15.6097C9.46528 15.6097 9.84409 15.2309 9.84409 14.7653H8.15625ZM8.99966 3.86674C8.02254 3.86674 7.10453 4.24717 6.41475 4.93796C5.72395 5.62775 5.34352 6.54612 5.34352 7.52389V13.4997H12.6558V7.52389C12.6558 6.54648 12.2757 5.62811 11.5856 4.93796C10.8958 4.24717 9.97743 3.86674 8.99966 3.86674Z" fill="#1F1F1F"/>
                        </svg>
                    </span>
                </lme-badge>
                <lme-badge type="dot">
                    <span class="demo-icon">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.99963 18.594C8.79371 18.594 7.81262 17.6124 7.81262 16.4059H3.59388C3.50765 16.4059 3.4375 16.3357 3.4375 16.2495V15.6251C3.4375 15.2802 3.7181 14.9996 4.063 14.9996H4.531V8.35988C4.531 7.03529 5.01044 5.75762 5.881 4.76226C6.7431 3.77656 7.92852 3.13206 9.21887 2.9475V2.187C9.21887 1.75649 9.56911 1.40625 9.99963 1.40625C10.4308 1.40625 10.7815 1.75649 10.7815 2.187V2.9475C12.0718 3.13205 13.2574 3.77699 14.1188 4.76226C14.989 5.75754 15.4683 7.0352 15.4683 8.35988V14.9996H15.9374C16.2823 14.9996 16.5629 15.2802 16.5629 15.6251V16.2495C16.5629 16.3357 16.4927 16.4059 16.4065 16.4059H12.1877C12.1877 17.6119 11.2056 18.594 9.99963 18.594ZM9.0625 16.4059C9.0625 16.9232 9.48289 17.3441 9.99963 17.3441C10.517 17.3441 10.9379 16.9232 10.9379 16.4059H9.0625ZM9.99963 4.29637C8.91394 4.29637 7.89393 4.71907 7.1275 5.48662C6.35995 6.25305 5.93725 7.27346 5.93725 8.35988V14.9996H14.062V8.35988C14.062 7.27386 13.6397 6.25345 12.8729 5.48662C12.1065 4.71907 11.086 4.29637 9.99963 4.29637Z" fill="#1F1F1F"/>
                        </svg>
                    </span>
                </lme-badge>
                <lme-badge type="dot">
                    <span class="demo-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.9995 22.3128C10.5525 22.3128 9.37515 21.1349 9.37515 19.6871H4.31265C4.20918 19.6871 4.125 19.6029 4.125 19.4994V18.7502C4.125 18.3363 4.46172 17.9996 4.8756 17.9996H5.4372V10.0319C5.4372 8.44235 6.01253 6.90915 7.0572 5.71472C8.09172 4.53188 9.51423 3.75848 11.0627 3.537V2.6244C11.0627 2.10779 11.4829 1.6875 11.9995 1.6875C12.5169 1.6875 12.9378 2.10779 12.9378 2.6244V3.537C14.4861 3.75846 15.9088 4.53239 16.9426 5.71472C17.9868 6.90905 18.5619 8.44224 18.5619 10.0319V17.9996H19.1248C19.5387 17.9996 19.8755 18.3363 19.8755 18.7502V19.4994C19.8755 19.6029 19.7913 19.6871 19.6878 19.6871H14.6253C14.6253 21.1342 13.4467 22.3128 11.9995 22.3128ZM10.875 19.6871C10.875 20.3079 11.3795 20.813 11.9995 20.813C12.6204 20.813 13.1255 20.3079 13.1255 19.6871H10.875ZM11.9995 5.15565C10.6967 5.15565 9.47271 5.66289 8.553 6.58395C7.63194 7.50366 7.1247 8.72816 7.1247 10.0319V17.9996H16.8744V10.0319C16.8744 8.72864 16.3676 7.50414 15.4475 6.58395C14.5277 5.66289 13.3032 5.15565 11.9995 5.15565Z" fill="#1F1F1F"/>
                        </svg>
                    </span>
                </lme-badge>
            </div>
        </div>

        {{-- Icon + Count --}}
        <div class="demo-section">
            <div style="margin-bottom: 20px;font-weight: bold">Icon + count</div>
            <div class="demo-row">
                <lme-badge type="count" :count="5" dot-top="-4px" dot-right="-3px">
                    <span class="demo-icon">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.4537 14.3595C13.4021 14.3595 13.35 14.351 13.2989 14.3343L11.3126 13.6881C10.7653 13.8689 10.1948 13.9605 9.61778 13.9605C8.47608 13.9605 7.34113 13.5918 6.42201 12.9222L6.43022 12.9158C5.88142 12.8856 5.34225 12.7765 4.82811 12.5937L2.84991 13.2174C2.80108 13.2328 2.75053 13.2407 2.69966 13.2407C2.48037 13.2407 2.28902 13.1 2.22351 12.8907C2.2082 12.8439 2.20011 12.7931 2.20011 12.744L2.18751 10.6722C1.43161 9.69372 1.02124 8.51937 1.00097 7.27671C0.980567 6.02592 1.3585 4.82797 2.09391 3.81238C3.17282 2.33467 4.91129 1.45245 6.74432 1.45245C7.96072 1.45245 9.12432 1.83093 10.1093 2.54698C10.4381 2.78462 10.7431 3.05865 11.0156 3.36148C12.2139 3.68266 13.2352 4.38455 13.9685 5.39098C14.6508 6.32991 15.008 7.4392 15.0014 8.59892C14.9948 9.74915 14.6323 10.8442 13.9532 11.7657V13.8591C13.9532 14.135 13.7291 14.3595 13.4537 14.3595ZM11.2973 12.4848L12.8282 13.0005L12.8129 11.3751L12.938 11.2185C14.1395 9.73023 14.1909 7.60997 13.0631 6.06238C12.7931 5.68725 12.4669 5.36143 12.0938 5.09398L12.0848 5.08768C12.8069 6.92158 12.547 8.96864 11.3909 10.5624C10.6529 11.574 9.63053 12.3029 8.43441 12.6702L8.43801 12.672C8.81966 12.7789 9.21345 12.8332 9.60825 12.8332C10.1217 12.8332 10.6267 12.7423 11.1092 12.5631L11.2973 12.4848ZM6.75148 2.57755C5.27352 2.57768 3.87117 3.29063 3.00021 4.48468C1.7688 6.18087 1.83949 8.50025 3.17211 10.125L3.29721 10.2654L3.31251 11.8908L4.85961 11.4066L5.04681 11.4849C5.585 11.6945 6.15059 11.8008 6.72786 11.8008C8.20841 11.8008 9.6128 11.0868 10.4846 9.89097C11.2067 8.89762 11.4973 7.681 11.303 6.46524C11.1086 5.24865 10.4517 4.17898 9.45321 3.45328C8.66154 2.88028 7.72729 2.57746 6.75148 2.57755ZM8.95371 7.82818C8.59438 7.82818 8.31291 7.55382 8.31291 7.20358C8.31291 6.85283 8.59438 6.57808 8.95371 6.57808C9.28398 6.57808 9.56301 6.86452 9.56301 7.20358C9.56301 7.54215 9.28398 7.82818 8.95371 7.82818ZM6.76581 7.82818C6.40648 7.82818 6.12501 7.55382 6.12501 7.20358C6.12501 6.85283 6.40648 6.57808 6.76581 6.57808C7.09608 6.57808 7.37511 6.86452 7.37511 7.20358C7.37511 7.54215 7.09608 7.82818 6.76581 7.82818ZM4.57791 7.82818C4.21909 7.82818 3.93801 7.55382 3.93801 7.20358C3.93801 6.85283 4.21909 6.57808 4.57791 6.57808C4.91438 6.57808 5.18811 6.85868 5.18811 7.20358C5.18811 7.54215 4.90867 7.82818 4.57791 7.82818Z" fill="#1F1F1F"/>
                        </svg>
                    </span>
                </lme-badge>
                <lme-badge type="count" :count="5" dot-top="-3px" dot-right="-2px">
                    <span class="demo-icon">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15.1355 16.1544C15.0774 16.1544 15.0188 16.1449 14.9613 16.1261L12.7267 15.3991C12.111 15.6025 11.4692 15.7056 10.82 15.7056C9.53563 15.7056 8.25881 15.2907 7.2248 14.5374L7.23403 14.5303C6.61663 14.4962 6.01007 14.3736 5.43166 14.1679L3.20618 14.8695C3.15125 14.8869 3.09438 14.8957 3.03715 14.8957C2.79045 14.8958 2.57518 14.7375 2.50148 14.502C2.48426 14.4493 2.47516 14.3923 2.47516 14.337L2.46098 12.0062C1.6106 10.9054 1.14893 9.58429 1.12613 8.1863C1.10318 6.77916 1.52835 5.43146 2.35568 4.28892C3.56946 2.6265 5.52524 1.634 7.5874 1.634C8.95585 1.634 10.2649 2.05979 11.373 2.86535C11.7429 3.13269 12.086 3.44098 12.3926 3.78166C13.7407 4.14299 14.8896 4.93262 15.7146 6.06485C16.4822 7.12115 16.884 8.3691 16.8766 9.67378C16.8692 10.9678 16.4614 12.1997 15.6974 13.2364V15.5915C15.6974 15.9019 15.4453 16.1544 15.1355 16.1544ZM12.7095 14.0454L14.4318 14.6255L14.4146 12.797L14.5553 12.6208C15.9069 10.9465 15.9648 8.56121 14.696 6.82017C14.3922 6.39815 14.0253 6.03161 13.6056 5.73072L13.5954 5.72364C14.4078 7.78677 14.1154 10.0897 12.8148 11.8827C11.9845 13.0207 10.8344 13.8407 9.48875 14.2539L9.4928 14.256C9.92215 14.3763 10.3652 14.4373 10.8093 14.4373C11.3869 14.4373 11.955 14.3351 12.4979 14.1334L12.7095 14.0454ZM7.59545 2.89974C5.93275 2.89989 4.3551 3.70196 3.37527 5.04526C1.98994 6.95347 2.06946 9.56278 3.56866 11.3906L3.7094 11.5485L3.72661 13.3771L5.4671 12.8324L5.6777 12.9205C6.28316 13.1563 6.91945 13.2759 7.56888 13.2759C9.2345 13.2759 10.8144 12.4727 11.7952 11.1273C12.6075 10.0098 12.9345 8.64112 12.716 7.27339C12.4973 5.90473 11.7582 4.70135 10.6349 3.88494C9.74427 3.24031 8.69324 2.89964 7.59545 2.89974ZM10.073 8.8067C9.66871 8.8067 9.35206 8.49804 9.35206 8.10402C9.35206 7.70943 9.66871 7.40034 10.073 7.40034C10.4445 7.40034 10.7584 7.72258 10.7584 8.10402C10.7584 8.48491 10.4445 8.8067 10.073 8.8067ZM7.61157 8.8067C7.20733 8.8067 6.89067 8.49804 6.89067 8.10402C6.89067 7.70943 7.20733 7.40034 7.61157 7.40034C7.98313 7.40034 8.29703 7.72258 8.29703 8.10402C8.29703 8.48491 7.98313 8.8067 7.61157 8.8067ZM5.15018 8.8067C4.74651 8.8067 4.4303 8.49804 4.4303 8.10402C4.4303 7.70943 4.74651 7.40034 5.15018 7.40034C5.52871 7.40034 5.83666 7.71601 5.83666 8.10402C5.83666 8.48491 5.52229 8.8067 5.15018 8.8067Z" fill="#1F1F1F"/>
                        </svg>
                    </span>
                </lme-badge>
                <lme-badge type="count" :count="5" dot-top="-1px" dot-right="-1px">
                    <span class="demo-icon">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.8172 17.9493C16.7526 17.9493 16.6875 17.9387 16.6236 17.9178L14.1408 17.1101C13.4566 17.3361 12.7435 17.4506 12.0222 17.4506C10.5951 17.4506 9.17642 16.9897 8.02752 16.1527L8.03779 16.1447C7.35179 16.1069 6.67782 15.9707 6.03515 15.7421L3.5624 16.5217C3.50136 16.541 3.43817 16.5508 3.37459 16.5508C3.10047 16.5508 2.86129 16.375 2.7794 16.1133C2.76026 16.0548 2.75015 15.9914 2.75015 15.93L2.7344 13.3402C1.78952 12.1171 1.27656 10.6492 1.25122 9.09588C1.22572 7.53239 1.69814 6.03495 2.6174 4.76546C3.96604 2.91833 6.13912 1.81555 8.43041 1.81555C9.95091 1.81555 11.4054 2.28865 12.6366 3.18371C13.0477 3.48076 13.4288 3.8233 13.7695 4.20184C15.2674 4.60331 16.544 5.48068 17.4606 6.73871C18.3136 7.91238 18.76 9.29899 18.7517 10.7486C18.7435 12.1864 18.2904 13.5552 17.4415 14.7071V17.3238C17.4415 17.6687 17.1614 17.9493 16.8172 17.9493ZM14.1216 15.606L16.0353 16.2506L16.0161 14.2188L16.1725 14.0231C17.6743 12.1628 17.7386 9.51245 16.3289 7.57796C15.9913 7.10905 15.5837 6.70178 15.1173 6.36746L15.106 6.35959C16.0087 8.65196 15.6837 11.2108 14.2386 13.203C13.3161 14.4675 12.0382 15.3786 10.543 15.8377L10.5475 15.84C11.0246 15.9736 11.5168 16.0415 12.0103 16.0415C12.6521 16.0415 13.2833 15.9279 13.8865 15.7038L14.1216 15.606ZM8.43936 3.22193C6.59191 3.22209 4.83897 4.11328 3.75027 5.60584C2.21101 7.72608 2.29937 10.6253 3.96515 12.6562L4.12152 12.8317L4.14065 14.8635L6.07452 14.2582L6.30852 14.3561C6.98126 14.6181 7.68825 14.7509 8.40984 14.7509C10.2605 14.7509 12.016 13.8585 13.1058 12.3637C14.0083 11.122 14.3717 9.60124 14.1288 8.08154C13.8858 6.5608 13.0646 5.22371 11.8165 4.31659C10.8269 3.60034 9.65912 3.22181 8.43936 3.22193ZM11.1922 9.78521C10.743 9.78521 10.3911 9.44226 10.3911 9.00446C10.3911 8.56603 10.743 8.22259 11.1922 8.22259C11.605 8.22259 11.9538 8.58064 11.9538 9.00446C11.9538 9.42768 11.605 9.78521 11.1922 9.78521ZM8.45727 9.78521C8.00811 9.78521 7.65627 9.44226 7.65627 9.00446C7.65627 8.56603 8.00811 8.22259 8.45727 8.22259C8.87011 8.22259 9.2189 8.58064 9.2189 9.00446C9.2189 9.42768 8.87011 9.78521 8.45727 9.78521ZM5.7224 9.78521C5.27387 9.78521 4.92252 9.44226 4.92252 9.00446C4.92252 8.56603 5.27387 8.22259 5.7224 8.22259C6.14299 8.22259 6.48515 8.57334 6.48515 9.00446C6.48515 9.42768 6.13585 9.78521 5.7224 9.78521Z" fill="#1F1F1F"/>
                        </svg>
                    </span>
                </lme-badge>
                <lme-badge type="count" :count="5">
                    <span class="demo-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M20.1806 21.5392C20.1031 21.5392 20.025 21.5265 19.9484 21.5014L16.9689 20.5321C16.1479 20.8033 15.2923 20.9408 14.4267 20.9408C12.7141 20.9408 11.0117 20.3876 9.63304 19.3833L9.64536 19.3737C8.82216 19.3283 8.0134 19.1648 7.24219 18.8905L4.27489 19.8261C4.20165 19.8492 4.12582 19.861 4.04952 19.861C3.72058 19.861 3.43356 19.65 3.33529 19.336C3.31233 19.2658 3.30019 19.1897 3.30019 19.116L3.28129 16.0083C2.14744 14.5406 1.53189 12.7791 1.50148 10.9151C1.47088 9.03889 2.03778 7.24196 3.14089 5.71858C4.75926 3.50201 7.36696 2.17868 10.1165 2.17868C11.9411 2.17868 13.6865 2.7464 15.164 3.82048C15.6572 4.17694 16.1146 4.58798 16.5234 5.04223C18.3209 5.524 19.8528 6.57683 20.9528 8.08648C21.9763 9.49487 22.512 11.1588 22.5021 12.8984C22.4922 14.6237 21.9485 16.2663 20.9298 17.6485V20.7886C20.9298 21.2025 20.5937 21.5392 20.1806 21.5392ZM16.946 18.7272L19.2423 19.5007L19.2194 17.0626L19.407 16.8277C21.2092 14.5954 21.2864 11.415 19.5947 9.09358C19.1896 8.53088 18.7004 8.04215 18.1407 7.64098L18.1272 7.63153C19.2104 10.3824 18.8205 13.453 17.0864 15.8436C15.9793 17.361 14.4458 18.4543 12.6516 19.0053L12.657 19.008C13.2295 19.1684 13.8202 19.2498 14.4124 19.2498C15.1825 19.2498 15.94 19.1135 16.6638 18.8446L16.946 18.7272ZM10.1272 3.86633C7.91031 3.86653 5.80678 4.93595 4.50034 6.72703C2.65323 9.27131 2.75926 12.7504 4.75819 15.1875L4.94584 15.3981L4.96879 17.8362L7.28944 17.1099L7.57024 17.2273C8.37753 17.5417 9.22591 17.7011 10.0918 17.7011C12.3126 17.7011 14.4192 16.6302 15.7269 14.8365C16.81 13.3464 17.246 11.5215 16.9546 9.69787C16.663 7.87298 15.6776 6.26848 14.1798 5.17993C12.9923 4.32043 11.591 3.8662 10.1272 3.86633ZM13.4306 11.7423C12.8916 11.7423 12.4694 11.3307 12.4694 10.8054C12.4694 10.2793 12.8916 9.86713 13.4306 9.86713C13.926 9.86713 14.3445 10.2968 14.3445 10.8054C14.3445 11.3132 13.926 11.7423 13.4306 11.7423ZM10.1487 11.7423C9.60975 11.7423 9.18754 11.3307 9.18754 10.8054C9.18754 10.2793 9.60975 9.86713 10.1487 9.86713C10.6441 9.86713 11.0627 10.2968 11.0627 10.8054C11.0627 11.3132 10.6441 11.7423 10.1487 11.7423ZM6.86689 11.7423C6.32866 11.7423 5.90704 11.3307 5.90704 10.8054C5.90704 10.2793 6.32866 9.86713 6.86689 9.86713C7.3716 9.86713 7.78219 10.288 7.78219 10.8054C7.78219 11.3132 7.36303 11.7423 6.86689 11.7423Z" fill="#1F1F1F"/>
                        </svg>
                    </span>
                </lme-badge>
            </div>
        </div>

        {{-- Text + Badge --}}
        <div class="demo-section">
            <div style="margin-bottom: 20px;font-weight: bold">Text</div>
            <div style="display: flex; flex-direction: column; gap: 10px;">
                <div class="demo-row">
                    <div style="display: flex; align-items: center; gap: 5px;">
                        <span class="demo-text-14">テキスト</span>
                        <lme-badge type="dot"></lme-badge>
                    </div>
                    <div style="display: flex; align-items: center; gap: 5px;">
                        <span class="demo-text-16">テキスト</span>
                        <lme-badge type="dot"></lme-badge>
                    </div>
                    <div style="display: flex; align-items: center; gap: 5px;">
                        <span class="demo-text-14">テキスト</span>
                        <lme-badge type="count" :count="5"></lme-badge>
                    </div>
                    <div style="display: flex; align-items: center; gap: 5px;">
                        <span class="demo-text-16">テキスト</span>
                        <lme-badge type="count" :count="5"></lme-badge>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="/js/component-base/badge/lme-badge.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/badge/badge.js?v={{config("sns-line.version")}}"></script>
@endpush