@extends('component-base.layout')

@section('title')
    Tag
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/tag/tag.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/tag/status.css?v={{config("sns-line.version")}}">
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        <div class="lme-flex lme-flex-col" style="gap: 20px">
            <div class="lme-flex lme-flex-col" style="padding: 20px;gap: 20px;background: white; border-radius: 10px">
                <div style="font-weight: bold">タグ normal</div>
                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag1" text="タグ14px"
                             size="md"
                             type="default"
                             @close="closeTag('tag1')">
                    </lme-tag>
                    <lme-tag v-if="tag2" text="タグ12px"
                             size="sm"
                             type="default"
                             @close="closeTag('tag2')">
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag3" text="タグ14px"
                             size="md"
                             type="danger"
                             @close="closeTag('tag3')">
                    </lme-tag>
                    <lme-tag v-if="tag4" text="タグ12px"
                             size="sm"
                             type="danger"
                             @close="closeTag('tag4')">
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag5" text="タグ14px"
                             size="md"
                             type="warning"
                             @close="closeTag('tag5')">
                    </lme-tag>
                    <lme-tag v-if="tag6" text="タグ12px"
                             size="sm"
                             type="warning"
                             @close="closeTag('tag6')">
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag7" text="タグ14px"
                             size="md"
                             type="success"
                             @close="closeTag('tag7')">
                    </lme-tag>
                    <lme-tag v-if="tag8" text="タグ12px"
                             size="sm"
                             type="success"
                             @close="closeTag('tag8')">
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag9" text="タグ14px"
                             size="md"
                             type="primary"
                             @close="closeTag('tag9')">
                    </lme-tag>
                    <lme-tag v-if="tag10" text="タグ12px"
                             size="sm"
                             type="primary"
                             @close="closeTag('tag10')">
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag11" text="タグ14px"
                             size="md"
                             type="purple"
                             @close="closeTag('tag11')">
                    </lme-tag>
                    <lme-tag v-if="tag12" text="タグ12px"
                             size="sm"
                             type="purple"
                             @close="closeTag('tag12')">
                    </lme-tag>
                </div>
            </div>

            <div class="lme-flex lme-flex-col" style="padding: 20px;gap: 20px;background: white; border-radius: 10px">
                <div style="font-weight: bold">タグ close</div>
                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag1tag1" text="タグ14px"
                             size="md"
                             type="default"
                             closeable
                             @close="closeTag('tag1tag1')">
                    </lme-tag>
                    <lme-tag v-if="tag21" text="タグ12px"
                             size="sm"
                             type="default"
                             closeable
                             @close="closeTag('tag21')">
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag31" text="タグ14px"
                             size="md"
                             type="danger"
                             closeable
                             @close="closeTag('tag31')">
                    </lme-tag>
                    <lme-tag v-if="tag41" text="タグ12px"
                             size="sm"
                             type="danger"
                             closeable
                             @close="closeTag('tag41')">
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag51" text="タグ14px"
                             size="md"
                             type="warning"
                             closeable
                             @close="closeTag('tag51')">
                    </lme-tag>
                    <lme-tag v-if="tag61" text="タグ12px"
                             size="sm"
                             type="warning"
                             closeable
                             @close="closeTag('tag61')">
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag71" text="タグ14px"
                             size="md"
                             type="success"
                             closeable
                             @close="closeTag('tag71')">
                    </lme-tag>
                    <lme-tag v-if="tag81" text="タグ12px"
                             size="sm"
                             type="success"
                             closeable
                             @close="closeTag('tag81')">
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag91" text="タグ14px"
                             size="md"
                             type="primary"
                             closeable
                             @close="closeTag('tag91')">
                    </lme-tag>
                    <lme-tag v-if="tag101" text="タグ12px"
                             size="sm"
                             type="primary"
                             closeable
                             @close="closeTag('tag101')">
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag111" text="タグ14px"
                             size="md"
                             type="purple"
                             closeable
                             @close="closeTag('tag111')">
                    </lme-tag>
                    <lme-tag v-if="tag121" text="タグ12px"
                             size="sm"
                             type="purple"
                             closeable
                             @close="closeTag('tag121')">
                    </lme-tag>
                </div>
            </div>

            <div class="lme-flex lme-flex-col" style="padding: 20px;gap: 20px;background: white; border-radius: 10px">
                <div style="font-weight: bold">タグ prefix</div>
                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag1tag2" text="タグ14px"
                             size="md"
                             type="default"
                             translate-y="1px"
                             closeable
                             @close="closeTag('tag1tag2')">
                        <span class="lme-tag-prefix">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.11087 11.6487C5.07377 11.6487 5.04027 11.6348 5.014 11.6085L0.0401625 6.63469C0.0142625 6.60916 0 6.57505 0 6.53861C0 6.50219 0.0142625 6.46806 0.0401625 6.44254L6.44253 0.039375C6.46903 0.01288 6.50303 0 6.54648 0H6.55199L10.8258 0.404775C11.0477 0.426886 11.2235 0.602744 11.2439 0.822937L11.6487 5.0967C11.6519 5.1378 11.6378 5.17769 11.6101 5.20616L5.20773 11.6085C5.18146 11.6348 5.14797 11.6487 5.11087 11.6487ZM6.87723 1.07494L1.41278 6.5394L5.1093 10.2359L10.5745 4.77146L10.254 1.39466L6.87723 1.07494ZM8.12148 4.73051C7.45797 4.73051 6.91818 4.19072 6.91818 3.52721C6.91818 2.86371 7.45797 2.32391 8.12148 2.32391C8.78498 2.32391 9.32478 2.86371 9.32478 3.52721C9.32478 4.19072 8.78498 4.73051 8.12148 4.73051ZM8.12148 3.09015C7.88005 3.09015 7.68363 3.28621 7.68363 3.52721C7.68363 3.76864 7.88005 3.96506 8.12148 3.96506C8.36248 3.96506 8.55855 3.76864 8.55855 3.52721C8.55855 3.28621 8.36248 3.09015 8.12148 3.09015Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span>タグ14px</span>
                    </lme-tag>
                    <lme-tag v-if="tag22" text="タグ12px"
                             size="sm"
                             type="default"
                             closeable
                             @close="closeTag('tag22')">
                        <span class="lme-tag-prefix">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.11087 11.6487C5.07377 11.6487 5.04027 11.6348 5.014 11.6085L0.0401625 6.63469C0.0142625 6.60916 0 6.57505 0 6.53861C0 6.50219 0.0142625 6.46806 0.0401625 6.44254L6.44253 0.039375C6.46903 0.01288 6.50303 0 6.54648 0H6.55199L10.8258 0.404775C11.0477 0.426886 11.2235 0.602744 11.2439 0.822937L11.6487 5.0967C11.6519 5.1378 11.6378 5.17769 11.6101 5.20616L5.20773 11.6085C5.18146 11.6348 5.14797 11.6487 5.11087 11.6487ZM6.87723 1.07494L1.41278 6.5394L5.1093 10.2359L10.5745 4.77146L10.254 1.39466L6.87723 1.07494ZM8.12148 4.73051C7.45797 4.73051 6.91818 4.19072 6.91818 3.52721C6.91818 2.86371 7.45797 2.32391 8.12148 2.32391C8.78498 2.32391 9.32478 2.86371 9.32478 3.52721C9.32478 4.19072 8.78498 4.73051 8.12148 4.73051ZM8.12148 3.09015C7.88005 3.09015 7.68363 3.28621 7.68363 3.52721C7.68363 3.76864 7.88005 3.96506 8.12148 3.96506C8.36248 3.96506 8.55855 3.76864 8.55855 3.52721C8.55855 3.28621 8.36248 3.09015 8.12148 3.09015Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span>タグ12px</span>
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag32" text="タグ14px"
                             size="md"
                             type="danger"
                             translate-y="1px"
                             closeable
                             @close="closeTag('tag32')">
                        <span class="lme-tag-prefix">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.11087 11.6487C5.07377 11.6487 5.04027 11.6348 5.014 11.6085L0.0401625 6.63469C0.0142625 6.60916 0 6.57505 0 6.53861C0 6.50219 0.0142625 6.46806 0.0401625 6.44254L6.44253 0.039375C6.46903 0.01288 6.50303 0 6.54648 0H6.55199L10.8258 0.404775C11.0477 0.426886 11.2235 0.602744 11.2439 0.822937L11.6487 5.0967C11.6519 5.1378 11.6378 5.17769 11.6101 5.20616L5.20773 11.6085C5.18146 11.6348 5.14797 11.6487 5.11087 11.6487ZM6.87723 1.07494L1.41278 6.5394L5.1093 10.2359L10.5745 4.77146L10.254 1.39466L6.87723 1.07494ZM8.12148 4.73051C7.45797 4.73051 6.91818 4.19072 6.91818 3.52721C6.91818 2.86371 7.45797 2.32391 8.12148 2.32391C8.78498 2.32391 9.32478 2.86371 9.32478 3.52721C9.32478 4.19072 8.78498 4.73051 8.12148 4.73051ZM8.12148 3.09015C7.88005 3.09015 7.68363 3.28621 7.68363 3.52721C7.68363 3.76864 7.88005 3.96506 8.12148 3.96506C8.36248 3.96506 8.55855 3.76864 8.55855 3.52721C8.55855 3.28621 8.36248 3.09015 8.12148 3.09015Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span>タグ14px</span>
                    </lme-tag>
                    <lme-tag v-if="tag42" text="タグ12px"
                             size="sm"
                             type="danger"
                             closeable
                             @close="closeTag('tag42')">
                        <span class="lme-tag-prefix">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.11087 11.6487C5.07377 11.6487 5.04027 11.6348 5.014 11.6085L0.0401625 6.63469C0.0142625 6.60916 0 6.57505 0 6.53861C0 6.50219 0.0142625 6.46806 0.0401625 6.44254L6.44253 0.039375C6.46903 0.01288 6.50303 0 6.54648 0H6.55199L10.8258 0.404775C11.0477 0.426886 11.2235 0.602744 11.2439 0.822937L11.6487 5.0967C11.6519 5.1378 11.6378 5.17769 11.6101 5.20616L5.20773 11.6085C5.18146 11.6348 5.14797 11.6487 5.11087 11.6487ZM6.87723 1.07494L1.41278 6.5394L5.1093 10.2359L10.5745 4.77146L10.254 1.39466L6.87723 1.07494ZM8.12148 4.73051C7.45797 4.73051 6.91818 4.19072 6.91818 3.52721C6.91818 2.86371 7.45797 2.32391 8.12148 2.32391C8.78498 2.32391 9.32478 2.86371 9.32478 3.52721C9.32478 4.19072 8.78498 4.73051 8.12148 4.73051ZM8.12148 3.09015C7.88005 3.09015 7.68363 3.28621 7.68363 3.52721C7.68363 3.76864 7.88005 3.96506 8.12148 3.96506C8.36248 3.96506 8.55855 3.76864 8.55855 3.52721C8.55855 3.28621 8.36248 3.09015 8.12148 3.09015Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span>タグ12px</span>
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag52" text="タグ14px"
                             size="md"
                             type="warning"
                             translate-y="1px"
                             closeable
                             @close="closeTag('tag52')">
                        <span class="lme-tag-prefix">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.11087 11.6487C5.07377 11.6487 5.04027 11.6348 5.014 11.6085L0.0401625 6.63469C0.0142625 6.60916 0 6.57505 0 6.53861C0 6.50219 0.0142625 6.46806 0.0401625 6.44254L6.44253 0.039375C6.46903 0.01288 6.50303 0 6.54648 0H6.55199L10.8258 0.404775C11.0477 0.426886 11.2235 0.602744 11.2439 0.822937L11.6487 5.0967C11.6519 5.1378 11.6378 5.17769 11.6101 5.20616L5.20773 11.6085C5.18146 11.6348 5.14797 11.6487 5.11087 11.6487ZM6.87723 1.07494L1.41278 6.5394L5.1093 10.2359L10.5745 4.77146L10.254 1.39466L6.87723 1.07494ZM8.12148 4.73051C7.45797 4.73051 6.91818 4.19072 6.91818 3.52721C6.91818 2.86371 7.45797 2.32391 8.12148 2.32391C8.78498 2.32391 9.32478 2.86371 9.32478 3.52721C9.32478 4.19072 8.78498 4.73051 8.12148 4.73051ZM8.12148 3.09015C7.88005 3.09015 7.68363 3.28621 7.68363 3.52721C7.68363 3.76864 7.88005 3.96506 8.12148 3.96506C8.36248 3.96506 8.55855 3.76864 8.55855 3.52721C8.55855 3.28621 8.36248 3.09015 8.12148 3.09015Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span>タグ14px</span>
                    </lme-tag>
                    <lme-tag v-if="tag62" text="タグ12px"
                             size="sm"
                             type="warning"
                             closeable
                             @close="closeTag('tag62')">
                        <span class="lme-tag-prefix">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.11087 11.6487C5.07377 11.6487 5.04027 11.6348 5.014 11.6085L0.0401625 6.63469C0.0142625 6.60916 0 6.57505 0 6.53861C0 6.50219 0.0142625 6.46806 0.0401625 6.44254L6.44253 0.039375C6.46903 0.01288 6.50303 0 6.54648 0H6.55199L10.8258 0.404775C11.0477 0.426886 11.2235 0.602744 11.2439 0.822937L11.6487 5.0967C11.6519 5.1378 11.6378 5.17769 11.6101 5.20616L5.20773 11.6085C5.18146 11.6348 5.14797 11.6487 5.11087 11.6487ZM6.87723 1.07494L1.41278 6.5394L5.1093 10.2359L10.5745 4.77146L10.254 1.39466L6.87723 1.07494ZM8.12148 4.73051C7.45797 4.73051 6.91818 4.19072 6.91818 3.52721C6.91818 2.86371 7.45797 2.32391 8.12148 2.32391C8.78498 2.32391 9.32478 2.86371 9.32478 3.52721C9.32478 4.19072 8.78498 4.73051 8.12148 4.73051ZM8.12148 3.09015C7.88005 3.09015 7.68363 3.28621 7.68363 3.52721C7.68363 3.76864 7.88005 3.96506 8.12148 3.96506C8.36248 3.96506 8.55855 3.76864 8.55855 3.52721C8.55855 3.28621 8.36248 3.09015 8.12148 3.09015Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span>タグ12px</span>
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag72" text="タグ14px"
                             size="md"
                             type="success"
                             translate-y="1px"
                             closeable
                             @close="closeTag('tag72')">
                        <span class="lme-tag-prefix">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.11087 11.6487C5.07377 11.6487 5.04027 11.6348 5.014 11.6085L0.0401625 6.63469C0.0142625 6.60916 0 6.57505 0 6.53861C0 6.50219 0.0142625 6.46806 0.0401625 6.44254L6.44253 0.039375C6.46903 0.01288 6.50303 0 6.54648 0H6.55199L10.8258 0.404775C11.0477 0.426886 11.2235 0.602744 11.2439 0.822937L11.6487 5.0967C11.6519 5.1378 11.6378 5.17769 11.6101 5.20616L5.20773 11.6085C5.18146 11.6348 5.14797 11.6487 5.11087 11.6487ZM6.87723 1.07494L1.41278 6.5394L5.1093 10.2359L10.5745 4.77146L10.254 1.39466L6.87723 1.07494ZM8.12148 4.73051C7.45797 4.73051 6.91818 4.19072 6.91818 3.52721C6.91818 2.86371 7.45797 2.32391 8.12148 2.32391C8.78498 2.32391 9.32478 2.86371 9.32478 3.52721C9.32478 4.19072 8.78498 4.73051 8.12148 4.73051ZM8.12148 3.09015C7.88005 3.09015 7.68363 3.28621 7.68363 3.52721C7.68363 3.76864 7.88005 3.96506 8.12148 3.96506C8.36248 3.96506 8.55855 3.76864 8.55855 3.52721C8.55855 3.28621 8.36248 3.09015 8.12148 3.09015Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span>タグ14px</span>
                    </lme-tag>
                    <lme-tag v-if="tag82" text="タグ12px"
                             size="sm"
                             type="success"
                             closeable
                             @close="closeTag('tag82')">
                        <span class="lme-tag-prefix">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.11087 11.6487C5.07377 11.6487 5.04027 11.6348 5.014 11.6085L0.0401625 6.63469C0.0142625 6.60916 0 6.57505 0 6.53861C0 6.50219 0.0142625 6.46806 0.0401625 6.44254L6.44253 0.039375C6.46903 0.01288 6.50303 0 6.54648 0H6.55199L10.8258 0.404775C11.0477 0.426886 11.2235 0.602744 11.2439 0.822937L11.6487 5.0967C11.6519 5.1378 11.6378 5.17769 11.6101 5.20616L5.20773 11.6085C5.18146 11.6348 5.14797 11.6487 5.11087 11.6487ZM6.87723 1.07494L1.41278 6.5394L5.1093 10.2359L10.5745 4.77146L10.254 1.39466L6.87723 1.07494ZM8.12148 4.73051C7.45797 4.73051 6.91818 4.19072 6.91818 3.52721C6.91818 2.86371 7.45797 2.32391 8.12148 2.32391C8.78498 2.32391 9.32478 2.86371 9.32478 3.52721C9.32478 4.19072 8.78498 4.73051 8.12148 4.73051ZM8.12148 3.09015C7.88005 3.09015 7.68363 3.28621 7.68363 3.52721C7.68363 3.76864 7.88005 3.96506 8.12148 3.96506C8.36248 3.96506 8.55855 3.76864 8.55855 3.52721C8.55855 3.28621 8.36248 3.09015 8.12148 3.09015Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span>タグ12px</span>
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag92" text="タグ14px"
                             size="md"
                             type="primary"
                             translate-y="1px"
                             closeable
                             @close="closeTag('tag92')">
                        <span class="lme-tag-prefix">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.11087 11.6487C5.07377 11.6487 5.04027 11.6348 5.014 11.6085L0.0401625 6.63469C0.0142625 6.60916 0 6.57505 0 6.53861C0 6.50219 0.0142625 6.46806 0.0401625 6.44254L6.44253 0.039375C6.46903 0.01288 6.50303 0 6.54648 0H6.55199L10.8258 0.404775C11.0477 0.426886 11.2235 0.602744 11.2439 0.822937L11.6487 5.0967C11.6519 5.1378 11.6378 5.17769 11.6101 5.20616L5.20773 11.6085C5.18146 11.6348 5.14797 11.6487 5.11087 11.6487ZM6.87723 1.07494L1.41278 6.5394L5.1093 10.2359L10.5745 4.77146L10.254 1.39466L6.87723 1.07494ZM8.12148 4.73051C7.45797 4.73051 6.91818 4.19072 6.91818 3.52721C6.91818 2.86371 7.45797 2.32391 8.12148 2.32391C8.78498 2.32391 9.32478 2.86371 9.32478 3.52721C9.32478 4.19072 8.78498 4.73051 8.12148 4.73051ZM8.12148 3.09015C7.88005 3.09015 7.68363 3.28621 7.68363 3.52721C7.68363 3.76864 7.88005 3.96506 8.12148 3.96506C8.36248 3.96506 8.55855 3.76864 8.55855 3.52721C8.55855 3.28621 8.36248 3.09015 8.12148 3.09015Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span>タグ14px</span>
                    </lme-tag>
                    <lme-tag v-if="tag102" text="タグ12px"
                             size="sm"
                             type="primary"
                             closeable
                             @close="closeTag('tag102')">
                        <span class="lme-tag-prefix">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.11087 11.6487C5.07377 11.6487 5.04027 11.6348 5.014 11.6085L0.0401625 6.63469C0.0142625 6.60916 0 6.57505 0 6.53861C0 6.50219 0.0142625 6.46806 0.0401625 6.44254L6.44253 0.039375C6.46903 0.01288 6.50303 0 6.54648 0H6.55199L10.8258 0.404775C11.0477 0.426886 11.2235 0.602744 11.2439 0.822937L11.6487 5.0967C11.6519 5.1378 11.6378 5.17769 11.6101 5.20616L5.20773 11.6085C5.18146 11.6348 5.14797 11.6487 5.11087 11.6487ZM6.87723 1.07494L1.41278 6.5394L5.1093 10.2359L10.5745 4.77146L10.254 1.39466L6.87723 1.07494ZM8.12148 4.73051C7.45797 4.73051 6.91818 4.19072 6.91818 3.52721C6.91818 2.86371 7.45797 2.32391 8.12148 2.32391C8.78498 2.32391 9.32478 2.86371 9.32478 3.52721C9.32478 4.19072 8.78498 4.73051 8.12148 4.73051ZM8.12148 3.09015C7.88005 3.09015 7.68363 3.28621 7.68363 3.52721C7.68363 3.76864 7.88005 3.96506 8.12148 3.96506C8.36248 3.96506 8.55855 3.76864 8.55855 3.52721C8.55855 3.28621 8.36248 3.09015 8.12148 3.09015Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span>タグ12px</span>
                    </lme-tag>
                </div>

                <div class="lme-flex" style="gap: 20px">
                    <lme-tag v-if="tag112" text="タグ14px"
                             size="md"
                             type="purple"
                             translate-y="1px"
                             closeable
                             @close="closeTag('tag112')">
                        <span class="lme-tag-prefix">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.11087 11.6487C5.07377 11.6487 5.04027 11.6348 5.014 11.6085L0.0401625 6.63469C0.0142625 6.60916 0 6.57505 0 6.53861C0 6.50219 0.0142625 6.46806 0.0401625 6.44254L6.44253 0.039375C6.46903 0.01288 6.50303 0 6.54648 0H6.55199L10.8258 0.404775C11.0477 0.426886 11.2235 0.602744 11.2439 0.822937L11.6487 5.0967C11.6519 5.1378 11.6378 5.17769 11.6101 5.20616L5.20773 11.6085C5.18146 11.6348 5.14797 11.6487 5.11087 11.6487ZM6.87723 1.07494L1.41278 6.5394L5.1093 10.2359L10.5745 4.77146L10.254 1.39466L6.87723 1.07494ZM8.12148 4.73051C7.45797 4.73051 6.91818 4.19072 6.91818 3.52721C6.91818 2.86371 7.45797 2.32391 8.12148 2.32391C8.78498 2.32391 9.32478 2.86371 9.32478 3.52721C9.32478 4.19072 8.78498 4.73051 8.12148 4.73051ZM8.12148 3.09015C7.88005 3.09015 7.68363 3.28621 7.68363 3.52721C7.68363 3.76864 7.88005 3.96506 8.12148 3.96506C8.36248 3.96506 8.55855 3.76864 8.55855 3.52721C8.55855 3.28621 8.36248 3.09015 8.12148 3.09015Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span>タグ14px</span>
                    </lme-tag>
                    <lme-tag v-if="tag122" text="タグ12px"
                             size="sm"
                             type="purple"
                             closeable
                             @close="closeTag('tag122')">
                        <span class="lme-tag-prefix">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.11087 11.6487C5.07377 11.6487 5.04027 11.6348 5.014 11.6085L0.0401625 6.63469C0.0142625 6.60916 0 6.57505 0 6.53861C0 6.50219 0.0142625 6.46806 0.0401625 6.44254L6.44253 0.039375C6.46903 0.01288 6.50303 0 6.54648 0H6.55199L10.8258 0.404775C11.0477 0.426886 11.2235 0.602744 11.2439 0.822937L11.6487 5.0967C11.6519 5.1378 11.6378 5.17769 11.6101 5.20616L5.20773 11.6085C5.18146 11.6348 5.14797 11.6487 5.11087 11.6487ZM6.87723 1.07494L1.41278 6.5394L5.1093 10.2359L10.5745 4.77146L10.254 1.39466L6.87723 1.07494ZM8.12148 4.73051C7.45797 4.73051 6.91818 4.19072 6.91818 3.52721C6.91818 2.86371 7.45797 2.32391 8.12148 2.32391C8.78498 2.32391 9.32478 2.86371 9.32478 3.52721C9.32478 4.19072 8.78498 4.73051 8.12148 4.73051ZM8.12148 3.09015C7.88005 3.09015 7.68363 3.28621 7.68363 3.52721C7.68363 3.76864 7.88005 3.96506 8.12148 3.96506C8.36248 3.96506 8.55855 3.76864 8.55855 3.52721C8.55855 3.28621 8.36248 3.09015 8.12148 3.09015Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <span>タグ12px</span>
                    </lme-tag>
                </div>
            </div>

            <div class="lme-flex lme-flex-col" style="padding: 20px;gap: 20px;background: white; border-radius: 10px">
                <div style="font-weight: bold">タグ Add and remove</div>
                <div class="lme-flex lme-flex-col" style="width: 600px;gap: 20px">
                    <lme-tag-group v-model="tags" line-height="13px"></lme-tag-group>
                    <lme-tag-group v-model="tags2" size="sm"></lme-tag-group>
                </div>
            </div>

            <div class="lme-flex lme-flex-col" style="padding: 20px;gap: 20px;background: white; border-radius: 10px">
                <div style="font-weight: bold">Status</div>
                <div class="lme-flex" style="gap: 40px">
                    <div class="lme-flex lme-flex-col" style="gap: 20px">
                        <lme-status text="無効"></lme-status>
                        <lme-status text="アクティブ" color="#1677FF"></lme-status>
                        <lme-status text="成功" color="#52C41A"></lme-status>
                        <lme-status text="警告" color="#FAAD14"></lme-status>
                        <lme-status text="エラー" color="#FF4D4F"></lme-status>
                        <lme-status text="エルグラム" color="#722ED1"></lme-status>
                    </div>

                    <div class="lme-flex lme-flex-col" style="gap: 22px">
                        <lme-status text="無効" size="sm"></lme-status>
                        <lme-status text="アクティブ" size="sm" color="#1677FF"></lme-status>
                        <lme-status text="成功" size="sm" color="#52C41A"></lme-status>
                        <lme-status text="警告" size="sm" color="#FAAD14"></lme-status>
                        <lme-status text="エラー" size="sm" color="#FF4D4F"></lme-status>
                        <lme-status text="エルグラム" size="sm" color="#722ED1"></lme-status>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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