@extends('component-base.layout')

@section('title')
    Checkbox
@endsection

@push('css')
    <link rel="stylesheet" href="/_assets/commons/css/components/checkbox.css?v={{config("sns-line.version")}}" type="text/css">
    <style>
        .gr-checkbox {
            padding: 10px 20px;
            background: #ffffff;
            border-radius: 10px;
            margin-bottom: 30px;
        }
        .ct202602-custom-checkbox {
            margin-bottom: 20px;
        }
    </style>
@endpush

@section('contents')
    <div id="component">
        <div class="gr-checkbox">
            <h1>check+label</h1>
            <label class="ct202602-custom-checkbox">
                <input type="checkbox">
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label">選択なし</span>
            </label>
            <label class="ct202602-custom-checkbox">
                <input type="checkbox" checked>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label">選択中</span>
            </label>
            <label class="ct202602-custom-checkbox part">
                <input type="checkbox" checked>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label">部分選択</span>
            </label>
            <label class="ct202602-custom-checkbox part">
                <input type="checkbox" disabled checked>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label">部分選択</span>
            </label>
            <label class="ct202602-custom-checkbox">
                <input type="checkbox" disabled checked>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label">選択中</span>
            </label>
            <label class="ct202602-custom-checkbox">
                <input type="checkbox" disabled>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label">選択なし</span>
            </label>
        </div>
        <div class="gr-checkbox">
            <h1>checkbox</h1>
            <label class="ct202602-custom-checkbox">
                <input type="checkbox">
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label"></span>
            </label>
            <label class="ct202602-custom-checkbox">
                <input type="checkbox" checked>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label"></span>
            </label>
            <label class="ct202602-custom-checkbox part">
                <input type="checkbox" checked>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label"></span>
            </label>
            <label class="ct202602-custom-checkbox part">
                <input type="checkbox" disabled checked>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label"></span>
            </label>
            <label class="ct202602-custom-checkbox">
                <input type="checkbox" disabled checked>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label"></span>
            </label>
            <label class="ct202602-custom-checkbox">
                <input type="checkbox" disabled>
                <span class="ct202602-checkbox-box"></span>
                <span class="ct202602-checkbox-label"></span>
            </label>
        </div>
        <div class="gr-checkbox">
            <h1>group</h1>
            <div style="display: flex; gap: 20px">
                <label class="ct202602-custom-checkbox">
                    <input type="checkbox" checked>
                    <span class="ct202602-checkbox-box"></span>
                    <span class="ct202602-checkbox-label" >ラベル1</span>
                </label>
                <label class="ct202602-custom-checkbox">
                    <input type="checkbox" checked>
                    <span class="ct202602-checkbox-box"></span>
                    <span class="ct202602-checkbox-label" >ラベル2</span>
                </label>
                <label class="ct202602-custom-checkbox">
                    <input type="checkbox">
                    <span class="ct202602-checkbox-box"></span>
                    <span class="ct202602-checkbox-label">ラベル3</span>
                </label>
            </div>
            <div style="display: flex; gap: 20px">
                <label class="ct202602-custom-checkbox">
                    <input type="checkbox">
                    <span class="ct202602-checkbox-box"></span>
                    <span class="ct202602-checkbox-label" >ラベル4</span>
                </label>
                <label class="ct202602-custom-checkbox">
                    <input type="checkbox">
                    <span class="ct202602-checkbox-box"></span>
                    <span class="ct202602-checkbox-label" >ラベル5</span>
                </label>
                <label class="ct202602-custom-checkbox">
                    <input type="checkbox" checked>
                    <span class="ct202602-checkbox-box"></span>
                    <span class="ct202602-checkbox-label">ラベル6</span>
                </label>
            </div>
        </div>
    </div>
@endsection

@push('js')
@endpush