@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
@endpush

@section('content')
    <div class="row">
        <h2 class="text-center mb-3">Base Button</h2>
        <div class="col-sm-12 text-center">
            <button type="button" class="btn btn-sns-line btn-sns-line-light">Light</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-primary">Primary</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-success">Success</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-danger">Danger</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-warning">Warning</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-dark">Dark</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-secondary">Secondary</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-outline-default">Out Line</button>
        </div>
    </div>
    <br/>
    <hr/>
    <br/>
    <div class="row">
        <h2 class="text-center mb-3">Base Button Disable</h2>
        <div class="col-sm-12 text-center">
            <button type="button" class="btn btn-sns-line btn-sns-line-light" disabled>Light</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-primary" disabled>Primary</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-success" disabled>Success</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-danger" disabled>Danger</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-warning" disabled>Warning</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-dark" disabled>Dark</button>
            <button type="button" class="btn btn-sns-line btn-sns-line-secondary" disabled>Secondary</button>
        </div>
    </div>
    <br/>
    <hr/>
    <br/>
    <div class="row">
        <h2 class="text-center mb-3">Icon</h2>
        <div class="col-sm-12 text-center">
            <div class="col-sm-1">
                <span class="line-icon line-icon-close"><i class="fas fa-times"></i></span>
            </div>

            <div class="col-sm-1">
                <span class="line-icon"><i class="fas fa-trash-alt"></i></span>
            </div>

            <div class="col-sm-1">
                <span class="line-icon"><i class="fas fa-pen"></i></span>
            </div>

            <div class="col-sm-1">
                <span class="line-icon"><i class="fas fa-eye"></i></span>
            </div>

            <div class="col-sm-1">
                <span class="line-icon"><i class="fas fa-search"></i></span>
            </div>

            <div class="col-sm-1">
                <span class="line-icon"><i class="fas fa-chevron-up"></i></span>
            </div>

            <div class="col-sm-1">
                <span class="line-icon"><i class="fas fa-chevron-down"></i></span>
            </div>

            <div class="col-sm-1">
                <span class="line-icon"><i class="fas fa-chevron-left"></i></span>
            </div>

            <div class="col-sm-1">
                <span class="line-icon"><i class="fas fa-chevron-right"></i></span>
            </div>

            <div class="col-sm-1">
                <span class="line-icon"><i class="fas fa-stamp"></i></span>
            </div>

            <div class="col-sm-1">
                <span class="line-icon"><i class="fas fa-image-polaroid"></i></span>
            </div>

            <div class="col-sm-1">
                <span class="line-icon"><i class="fas fa-location-arrow"></i></span>
            </div>
        </div>
        <div class="col-sm-12 text-center mt-3">
            <div class="col-sm-1">
                <span class="line-icon"><i class="fas fa-file-alt"></i></span>
            </div>

        </div>
    </div>

@endsection

@push('js')
@endpush