@tailwind base;
@tailwind components;
@tailwind utilities;

.l-p {
    @apply p-0
}

.dynamic-bg {
    @apply sm:bg-red-500 md:bg-green-500 lg:bg-blue-500 xl:bg-yellow-500 2xl:bg-orange-500
  }

.canvas-bar {
    @apply absolute w-2 h-full flex items-center bg-transparent hover:bg-blue-500 cursor-col-resize;
}

.canvas-resize {
    @apply flex flex-row  absolute items-center justify-center w-4 h-32  bg-gray-700 cursor-col-resize outline-2 outline-blue-600 hover:outline;
}

.canvas-double-line {
    @apply border-x w-1 h-24 border-gray-200;
}

.topbar-screensize-button {
    @apply relative     
    m-0
    pl-2
    pr-2
     
    p-1 
    text-gray-400 
    hover:text-white
    active:accent-zinc-900 
    focus:bg-slate-950     
}

.btn-accordion {
    @apply flex 
    items-center     
    justify-between 
    w-full 
    p-2
    font-medium 
    rtl:text-right 
    text-gray-500 
    border
    border-b-0 
    border-neutral-900 
    /* focus:ring-4 
    focus:ring-gray-200  */
    dark:focus:ring-neutral-900 
    dark:border-neutral-700 
    dark:text-neutral-400 
    hover:bg-neutral-900
    /* dark:hover:bg-gray-800  */
    gap-1
}

.content-accordion {
    @apply 
    border 
    border-b-0 
    border-neutral-950 
    dark:border-neutral-700 
    bg-neutral-100
    dark:bg-neutral-900
}

.button-tab-style {
    @apply w-full
    text-neutral-900
    dark:text-neutral-100
    py-1 
    px-1 
    border-transparent
    border-b-2
    focus:border-neutral-500
    focus:border-b-2
    focus:bg-neutral-200
    dark:focus:bg-neutral-900
    transition-shadow 
    duration-1000
}

.content-tab-style {
    @apply transition-all 
    duration-300 
    /* bg-yellow-400 */
    /* p-4  */
    /* rounded-lg 
    shadow-md  */
    /* border-l-4  */
    /* border-blue-600 */    
}

.dropdown-list-style {
    @apply relative cursor-default select-none py-2 pl-3 pr-9
    hover:bg-neutral-200 hover:text-neutral-900
    dark:hover:bg-neutral-800 dark:hover:text-neutral-200;
}

/* CSS Preview Popup Button */
#css-preview-button {
    position: fixed;
    bottom: 20px; /* Adjust as needed */
    right: 20px; /* Adjust as needed */
    padding: 10px 15px;
    background-color: #007bff; /* Example primary color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000; /* Ensure it's above other content */
}

#css-preview-button:hover {
    background-color: #0056b3; /* Darker shade on hover */
}