@tailwind components;
/*
    Main wrapper
*/


body {
     
}
 
.cmt_wrapper {

    * {
        @apply p-0 m-0 no-underline;
    }

    button, select {
        @apply border-0 ring-0 outline-none cursor-pointer;
    }


    @apply text-sm bg-white relative;

    .cmt_loader {
        @apply absolute top-0 left-0 w-full;

        & > div {
            @apply overflow-hidden h-1 text-xs flex bg-sky-50 relative;

            & > div {
                @apply shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-sky-300;
            }
        }
    }

    .cmt_nav {
        @apply flex items-center bg-gray-100;

        .cmt_header {
            @apply mx-4 font-medium sm:text-lg text-gray-700 text-center;
        }
        .cmt_ul {
            @apply flex uppercase items-center font-semibold;

            .cmt_nav_a {
                @apply text-xs sm:text-sm tracking-wide text-gray-700 hover:bg-sky-500 hover:text-white transition duration-150 px-8 py-4 focus:ring-0;
                
                &.active {
                    @apply bg-sky-500 text-white;
                }
            }
        }
    }

    .cmt_flex {
        @apply flex items-center;        
    }

    .cmt_main {
        @apply p-6;
        .cmt_grid {
            @apply flex justify-between flex-col sm:flex-row gap-3;

            .cmt_table_div {
                @apply w-full overflow-auto;

                .table-bar {
                    @apply mb-3 flex items-center justify-between;
                    .search-bar {
                        @apply flex items-center;
                        input {
                            @apply rounded-sm form-input border-gray-100 text-sm px-2 py-2 h-8 sm:h-9 focus:ring-0 bg-gray-50 focus:bg-white transition duration-100;
                        }
                    }
                    .cmt-new-button {
                        @apply focus:ring-0 sm:mt-0 px-4 py-2 rounded-sm bg-sky-300 cursor-pointer bg-sky-50 hover:bg-sky-400 inline-flex items-center justify-center text-white hover:text-white focus:text-white;
                    }
                }

                .table-contailer {
                    @apply overflow-auto w-full;                   
                }

                .cmt-table {
                    @apply mb-4 table-auto w-full p-0 m-0 bg-gray-50 border border-gray-100 overflow-hidden rounded-sm overflow-hidden;

                    thead {
                        @apply border-b border-gray-200;

                        tr {
                            @apply bg-gray-100 text-xs text-gray-500;

                            th {
                                @apply font-normal py-3 px-3;
 

                                &:last-child {
                                    @apply border-r border-gray-200;
                                }

                                &.mobile_hide {
                                    @apply hidden md:block;
                                }
                            }
                        }
                    }
                    tbody {
                        tr {
                            @apply hover:bg-white transition duration-150 cursor-pointer border-b border-gray-100;
                            td {
                                @apply px-3 border-r border-gray-100;

                                &:first-child {
                                    @apply font-bold lowercase tracking-wide;
                                }

                                &.mobile_hide {
                                    @apply hidden md:block;
                                }

                                &.cmt_mime_quick_buttons {
                                    @apply h-12 cmt_flex justify-start flex items-center;

                                    .button-enabled-disabled {
                                        @apply mr-1 w-8 h-8 rounded-sm transition duration-150 inline-flex items-center justify-center focus:ring-0 text-white bg-green-200;

                                        &.enabled {
                                            @apply bg-red-200;
                                        }
                                    }
                                    .button-delete {
                                        @apply text-gray-400 w-8 h-8 rounded-sm hover:bg-red-400 transition duration-150 inline-flex items-center justify-center;
                                    }
                                    .button-delete-cancel {
                                        @apply ml-1 bg-gray-200 text-gray-400 px-3 hover:text-gray-500 h-8 rounded-sm hover:bg-gray-100   hover:border-gray-100 transition duration-150 inline-flex items-center justify-center;
                                    }
                                    .button-delete-confirm {
                                        @apply ml-1 bg-red-100 text-red-400 px-3 hover:text-white h-8 rounded-sm hover:bg-red-400 hover:border-gray-100 transition duration-150 flex items-center justify-center;
                                    }
                                }
                            }
                        }
                    }
                }
            } 
            .cmt-pagination {
                @apply flex items-center justify-between mt-2;

                button {
                    @apply inline-flex items-center px-3 py-2 rounded-sm transition duration-150;

                    &.disabled {
                        @apply bg-gray-100 hover:bg-gray-100 text-gray-500 hover:text-gray-500;
                    }
                    &.enabled {
                        @apply bg-sky-50 text-gray-500 hover:bg-sky-400 hover:text-white;
                    }
                }
            }

            .cmt_edit_div {
                @apply w-96;
                width: 36rem;
                .cmt-edit {
                    @apply bg-white rounded-sm bg-gray-50 border border-gray-200 rounded-sm overflow-hidden;

                    .edit-title {
                        @apply py-3 text-center bg-gray-100 text-lg border-b text-gray-600 border-gray-200;
                    }
                    .edit-p {
                        @apply p-4;

                        .fleldset {
                            @apply mb-4;

                            label  {
                                @apply text-gray-400 mb-2 block text-xs;
                            } 
                        }
                        .suggestions {
                            @apply w-full flex items-center flex-wrap gap-1;

                            button {
                                @apply uppercase bg-sky-300 transition duration-150 opacity-75 hover:opacity-100 text-white rounded-sm inline-flex items-center justify-center px-4 py-2 tracking-wide;
                            }
                        }
                        .button-enabled-large {
                            @apply rounded-sm inline-block overflow-hidden px-4 py-2 bg-gray-200 text-gray-500;

                            &.active {
                                @apply bg-sky-400 text-white;
                            }
                        }
                        .permissions {
                            @apply w-full flex items-center flex-wrap gap-1;

                            button {
                                @apply transition duration-150 text-white rounded-sm inline-flex items-center justify-center px-4 py-2 tracking-wide bg-gray-200 text-gray-500;

                                &.active {
                                    @apply bg-sky-400 text-white;
                                }
                            }
                        }
                    }
                }
            }
        }

        .error-message {
            @apply font-normal bg-red-50 border-red-100 text-red-400 rounded-md my-3 px-6 py-4 text-center;
        }
        .success-message {
            @apply font-normal bg-green-50 border-green-100 text-green-400 rounded-md my-3 px-6 py-4 text-center;
        }
    }

    .cmt-button {
        @apply rounded-sm text-lg bg-sky-300 hover:bg-sky-500 text-white focus:text-white px-8 py-2 transition duration-150;
    }
    .cmt-button-outline {
        @apply rounded-sm text-lg  bg-gray-100 hover:bg-gray-300 text-gray-500 px-8 py-2 transition duration-150;
    }
    @apply text-gray-600;
   
    .form-input {
        @apply  px-4 py-2 rounded-none w-full border border-gray-100 bg-white;
    } 

    .info-message {
        @apply bg-gray-100 mb-5 text-gray-500 px-4 py-6 rounded-sm text-sm tracking-wide;
    }
    .cmt_filesize {
        @apply p-4 rounded-sm border border-gray-100; 

        .fleld-set {
            @apply mb-4 px-4;
        }
        .settings-flex {
            @apply flex items-center flex-col sm:flex-row;

            label {
                @apply w-64 text-gray-500 mb-2 md:m-0;
            }
   
            & > div {
                @apply w-full flex items-center;

            }

            .form-size {
                @apply relative;
                button {
                    border: 1px solid;
                    @apply border border-gray-100 relative z-10 block bg-white px-6  py-3 focus:outline-none flex items-center;

                    span {
                        @apply mr-2 text-gray-500;
                    }

                    svg {
                        @apply h-5 w-5 text-gray-800 fill-current;
                    }
                }
                .overlay {
                    @apply fixed inset-0 h-full w-full z-10;
                } 
                .dropdown-div {
                    @apply absolute right-0 w-32 bg-white rounded-md shadow-xl z-20;

                    a {
                        @apply block px-4 py-2 text-sm capitalize hover:bg-sky-500 hover:text-white focus:text-white text-gray-500;

                        &.active {
                            @apply bg-sky-400 text-white;
                        }
                    }
                }             
            }

            .button-set {
                @apply flex items-center flex-col sm:flex-row;


                &> div {
                    @apply w-full;

                    label {
                        @apply w-64;
                    }
                }
            }
        }
    }

}

@tailwind utilities;