<template>
    <div class="responsive-table border-[1px] w-full rounded-md p-4 bg-green-50 border-green-200 mb-4 mx-4">
        <div class="overflow-x-auto scroll-thin-visible">
            <table class="borderd-table bg-white min-w-full">
                <slot></slot>
            </table>
        </div>
    </div>
</template>


<script>
    export default {
    }
</script>


<style >
    .borderd-table th:first-child {
        border-radius: 6px 0 0 0;
        -moz-border-radius: 6px 0 0 0;
        -webkit-border-radius: 6px 0 0 0;
    }

    .borderd-table th:last-child {
        border-radius: 0 6px 0 0;
        -moz-border-radius: 0 6px 0 0;
        -webkit-border-radius: 0 6px 0 0;
    }

    .borderd-table td:first-child,
    .borderd-table th:first-child {
        border-left: medium none;
    }

    .borderd-table th {
        background-color: #dce9f9;
        background-image: -moz-linear-gradient(center top, #f8f8f8, #ececec);
        background-image: -webkit-gradient(
            linear,
            0 0,
            0 bottom,
            from(#f8f8f8),
            to(#ececec),
            color-stop(0.4, #f8f8f8)
        );
        border-top: medium none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        font-size: 14px;
        font-weight: 600;
        padding: 10px;
        min-width: 150px
    }

    .borderd-table td,
    .borderd-table th {
        border-left: 1px solid #66d998;
        border-top: 1px solid #66d998;
        text-align: left;
        font-size: 14px;
    }
    .border-r {
        border-right: 1px solid #66d998;
    }
    .borderd-table {
        border: 1px solid #66d998;
        border-radius: 6px 6px 6px 6px;
        -moz-border-radius: 6px 6px 6px 6px;
        -webkit-border-radius: 6px 6px 6px 6px;
        box-shadow: 0 1px 1px #cccccc;
    }

    .scroll-thin-visible{
        scrollbar-width: thin;
    }

    .borderd-table td input:focus{
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    }
</style>
