.collapsible {
    @apply flex flex-col flex-grow-0 flex-shrink-0 self-start w-full overflow-hidden
}

.collapsible-container {
    @apply flex flex-grow-0 flex-shrink-0 overflow-hidden
}

.collapsible-header {
    @apply flex w-full justify-between items-center px-4 py-3 font-bold cursor-pointer transition-colors duration-100 ease-in-out
}

.collapsible-trigger-icon {
    @apply w-6 h-6 transform duration-300
}

.collapsible-title {
    @apply flex items-center w-full select-none
}

.collapsible-content {
    @apply px-4 py-3 w-full ;
}


/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.collapsible-filled-base{
    @apply border-b last:border-b-0
}
.collapsible-filled-base .collapsible-header {
    @apply text-white
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.collapsible-filled-black {
    @apply border-black border-opacity-50
}
.collapsible-filled-black .collapsible-header {
    @apply bg-gray-800 hover:bg-gray-300 hover:text-gray-700 border-black border-opacity-50
}

.collapsible-filled-black .collapsible-content {
    @apply bg-gray-300 bg-opacity-30 shadow-sm
}

/*Blue*/
.collapsible-filled-blue{
    @apply border-blue-700 border-opacity-50
}
.collapsible-filled-blue .collapsible-header {
    @apply bg-blue-500 hover:bg-blue-200 hover:text-blue-700
}

.collapsible-filled-blue .collapsible-content {
    @apply bg-blue-200 bg-opacity-50
}

/*Gray*/
.collapsible-filled-gray {
    @apply border-gray-700 border-opacity-50
}
.collapsible-filled-gray .collapsible-header {
    @apply bg-gray-500 hover:bg-gray-200 hover:text-gray-700
}

.collapsible-filled-gray .collapsible-content {
    @apply bg-gray-200 bg-opacity-50
}

/*Green*/
.collapsible-filled-green {
    @apply border-green-700 border-opacity-50
}
.collapsible-filled-green .collapsible-header {
    @apply bg-green-500 hover:bg-green-200 hover:text-green-700
}

.collapsible-filled-green .collapsible-content {
    @apply bg-green-200 bg-opacity-50
}

/*Indigo*/
.collapsible-filled-indigo {
    @apply border-indigo-700 border-opacity-50
}
.collapsible-filled-indigo .collapsible-header {
    @apply bg-indigo-500 hover:bg-indigo-200 hover:text-indigo-700
}

.collapsible-filled-indigo .collapsible-content {
    @apply bg-indigo-200 bg-opacity-50
}

/*Pink*/
.collapsible-filled-pink {
    @apply border-pink-700 border-opacity-50
}
.collapsible-filled-pink .collapsible-header {
    @apply bg-pink-500 hover:bg-pink-200 hover:text-pink-700
}

.collapsible-filled-pink .collapsible-content {
    @apply bg-pink-200 bg-opacity-50
}

/*Purple*/
.collapsible-filled-purple {
    @apply border-purple-700 border-opacity-50
}
.collapsible-filled-purple .collapsible-header {
    @apply bg-purple-500 hover:bg-purple-200 hover:text-purple-700
}

.collapsible-filled-purple .collapsible-content {
    @apply bg-purple-200 bg-opacity-50
}

/*Red*/
.collapsible-filled-red {
    @apply border-red-700 border-opacity-50
}
.collapsible-filled-red .collapsible-header {
    @apply bg-red-500 hover:bg-red-200 hover:text-red-700
}

.collapsible-filled-red .collapsible-content {
    @apply bg-red-200 bg-opacity-50
}
/*White*/
.collapsible-filled-white {
    @apply border-gray-500 border-opacity-50
}
.collapsible-filled-white .collapsible-header {
    @apply bg-white hover:bg-gray-200 text-gray-700
}

.collapsible-filled-white .collapsible-content {
    @apply bg-gray-50 bg-opacity-50
}

/*Yellow*/
.collapsible-filled-yellow {
    @apply border-yellow-700
}

.collapsible-filled-yellow .collapsible-header {
    @apply bg-yellow-500 hover:bg-yellow-200 hover:text-yellow-700
}

.collapsible-filled-yellow .collapsible-content {
    @apply bg-yellow-200 bg-opacity-50
}

/*</editor-fold>*/

/*<editor-fold desc="Light Style">*/
/*General Definitions*/

.collapsible-light-base {
    @apply h-full text-gray-600 border-b last:border-b-0
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.collapsible-light-black {
    @apply bg-gray-500  hover:bg-gray-200 border-gray-600 text-gray-50 hover:text-gray-600
}

/*Blue*/
.collapsible-light-blue {
    @apply bg-blue-200 hover:bg-blue-100 border-blue-400
}

/*Gray*/
.collapsible-light-gray {
    @apply bg-gray-200 hover:bg-gray-100 border-gray-400
}

/*Green*/
.collapsible-light-green {
    @apply bg-green-200 hover:bg-green-100 border-green-400
}

/*Indigo*/
.collapsible-light-indigo {
    @apply bg-indigo-200 hover:bg-indigo-100 border-indigo-400
}

/*Pink*/
.collapsible-light-pink {
    @apply bg-pink-200 hover:bg-pink-100 border-pink-300
}

/*Purple*/
.collapsible-light-purple {
    @apply bg-purple-200 hover:bg-purple-100 border-purple-400
}

/*Red*/
.collapsible-light-red {
    @apply bg-red-200 hover:bg-red-100 border-red-400
}

/*White*/
.collapsible-light-white {
    @apply bg-white hover:bg-gray-100 border-gray-300
}

/*Yellow*/
.collapsible-light-yellow {
    @apply bg-yellow-200 hover:bg-yellow-100 border-yellow-400
}

/*</editor-fold>*/

/*<editor-fold desc="Inline Style">*/
/*General Definitions*/
.collapsible-inline-base {
    @apply h-full text-gray-500 border-b last:border-b-0
}
.collapsible-inline-base .collapsible-header {
    @apply text-gray-600
}

.collapsible-inline-line {
    @apply flex w-2 -mr-1 h-auto;
}

.collapsible-inline-line:after {
    content: '&nbsp';
    visibility: hidden;
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.collapsible-inline-black {
    @apply bg-gray-200 hover:bg-gray-100 border-gray-200
}

.collapsible-inline-black #line {
    @apply bg-gray-800
}

/*Blue*/
.collapsible-inline-blue {
    @apply bg-blue-50 hover:bg-white border-blue-200
}

.collapsible-inline-blue #line {
    @apply bg-blue-500
}

/*Gray*/
.collapsible-inline-gray {
    @apply bg-gray-50 hover:bg-white border-gray-200
}

.collapsible-inline-gray #line {
    @apply bg-gray-500
}

/*Green*/
.collapsible-inline-green {
    @apply bg-green-50 hover:bg-white border-green-200
}

.collapsible-inline-green #line {
    @apply bg-green-500
}

/*Indigo*/
.collapsible-inline-indigo {
    @apply bg-indigo-50 hover:bg-white border-indigo-200
}

.collapsible-inline-indigo #line {
    @apply bg-indigo-500
}

/*Pink*/
.collapsible-inline-pink {
    @apply bg-pink-50 hover:bg-white border-pink-200
}

.collapsible-inline-pink #line {
    @apply bg-pink-500
}

/*Purple*/
.collapsible-inline-purple {
    @apply bg-purple-50 hover:bg-white border-purple-200
}

.collapsible-inline-purple #line {
    @apply bg-purple-500
}

/*Red*/
.collapsible-inline-red {
    @apply bg-red-50 hover:bg-white border-red-200
}

.collapsible-inline-red #line {
    @apply bg-red-500
}

/*White*/
.collapsible-inline-white {
    @apply bg-gray-50 hover:bg-white border-gray-50
}

.collapsible-inline-white #line {
    @apply bg-gray-300
}

/*Yellow*/
.collapsible-inline-yellow {
    @apply bg-yellow-50 hover:bg-white border-yellow-200
}

.collapsible-inline-yellow #line {
    @apply bg-yellow-500
}

/*</editor-fold>*/
