@import "./styles.css";

/*******************************************************
 django-parler
 *******************************************************/
div.parler-language-tabs {
    @apply flex
    gap-2
    lg:gap-4
    mb-6
    px-4
    py-3
    flex-row
    lg:-mx-4
    m-0
    p-1
    rounded
    text-sm
    bg-base-100
    border-0
    border-b-0
    dark:bg-white/[.04]
    after:hidden
}

div.parler-language-tabs span {
    @apply top-auto;
}

div.parler-language-tabs span.empty,
div.parler-language-tabs span.available {
    @apply flex
    flex-row
    items-center
    m-0
    px-2.5
    py-1
    rounded
    text-sm
    text-base-400
    font-medium
    bg-transparent
    border-0
    border-transparent
    hover:bg-base-700/[.04]
    hover:text-base-700
    dark:hover:bg-white/[.04]
    dark:hover:text-white;
}

div.parler-language-tabs span.current {
    @apply items-center
    px-2.5
    py-1
    rounded
    text-base-700
    font-medium
    bg-white
    border-transparent
    shadow-sm
    hover:bg-white
    dark:bg-base-900
    dark:text-white
    dark:hover:bg-base-900;
}

/*******************************************************
 versatile image
 *******************************************************/
.sizedimage-mod {
    @apply flex flex-col
}

.sizedimage-mod img {
    @apply rounded max-h-48 my-4;
}

.sizedimage-mod .ppoi-point {
    @apply rounded-full w-3 h-3 bg-red-600 border-0;
}

.sizedimage-mod .image-wrap.outer {
    @apply border-0;
}




/*******************************************************
 django-cms
 *******************************************************/

/* Prevent content from being hidden under django cms Topbar  */
div.cms-sideframe {
    @apply mt-[46px];
}

body.cms-admin-sideframe:not(.djangocms-admin-style) {
    margin-block-start: 0;
}

/* Reposition Django CMS admin navigation controls  */
div.cms.cms-toolbar-debug .cms-sideframe-controls {
    @apply top-[58px] right-[64px];
}

/* Fix Modal displaying django parent admin navigation  */
body.cms-admin-modal #page #main {
    @apply pt-8;
}

body.cms-admin-modal #page #main #submit-row {
    @apply hidden;
}

body.cms-admin-modal #page > div.relative:first-child {
    @apply hidden;
}

/*TODO: breaks plugin display */
body.cms-admin-modal #page #main > div:first-child {
    @apply hidden;
}

body.cms-admin-modal #page #main  {
    @apply -mt-10;
}

body.cms-admin-modal #page #main #content > div:not(#content-main) {
    @apply hidden;
}

.cms-admin-modal #nav-sidebar{
    @apply hidden;
}

/*******************************************************
 django-cms - pagetree
 *******************************************************/
.cms-pagetree-root {
    @apply rounded;
}

.cms-pagetree-header {
    @apply rounded-t;
}

.cms-pagetree-legend {
    @apply rounded-b;
}

div.cms-pagetree-header {
    @apply rounded-t text-primary-600 border-b-[var(--dca-gray-lighter)];
}

div.cms-pagetree-legend {
    @apply rounded-b border-b border-solid border-b-[var(--dca-gray-lighter)];
}

div.cms-pagetree-root {
    @apply !shadow-none;
}

div.cms-pagetree-header-filter input {
    @apply bg-white border border-base-200 dark:border-base-600 rounded font-medium grow min-w-0 h-9 px-3 text-font-default-light text-sm focus:outline-none dark:bg-base-900 dark:text-font-default-dark placeholder-shown:truncate placeholder-base-400;
}

button.cms-pagetree-header-search-btn {
    @apply !rounded-full;
}

div.cms-pagetree-header a.cms-btn-action {
    @apply !rounded;
}

input#nav-filter {
    @apply bg-white dark:bg-base-900;
}

/*check & refactor */
.js-cms-pagetree-languages {
    @apply border border-base-200 bg-white font-medium min-w-20 placeholder-base-400 rounded shadow-sm
    text-font-default-light text-sm focus:ring focus:ring-primary-300 focus:border-primary-600 focus:outline-none
    group-[.errors]:border-red-600 group-[.errors]:focus:ring-red-200 dark:bg-base-900 dark:border-base-700
    dark:text-font-default-dark dark:focus:border-primary-600 dark:focus:ring-primary-700
    dark:group-[.errors]:border-red-500 dark:group-[.errors]:focus:ring-red-600/40 px-3 py-2 w-full pr-8 max-w-2xl appearance-none;
}


/*******************************************************
 django-cms - theme
 *******************************************************/

/* django cms colors for light/dark/system */
html:root {
    --dca-light-mode: 1;
    --dca-dark-mode: 0;
    --dca-white: theme('colors.white');
    --dca-black: theme('colors.black');
    --dca-shadow: theme('colors.base.950');
    --dca-primary: theme('colors.primary.600');
    --dca-gray: theme('colors.base.500');
    --dca-gray-lightest: theme('colors.base.100');
    --dca-gray-lighter: theme('colors.base.200');
    --dca-gray-light: theme('colors.base.400');
    --dca-gray-darker: theme('colors.base.700');
    --dca-gray-darkest: theme('colors.base.800');
    --dca-gray-super-lightest: theme('colors.base.50');

    --active-brightness: 0.9;
    --focus-brightness: 0.95;
}


html.dark {
    --dca-light-mode: 0;
    --dca-dark-mode: 1;
    --dca-white: theme('colors.base.900');
    --dca-black: theme('colors.white');
    --dca-primary: theme('colors.primary.500');
    --dca-gray: theme('colors.base.300') !important;
    --dca-gray-lightest: theme('colors.base.700');
    --dca-gray-lighter: theme('colors.base.600');
    --dca-gray-light: theme('colors.base.400');
    --dca-gray-darker: theme('colors.base.200');
    --dca-gray-darkest: theme('colors.base.100');
    --dca-gray-super-lightest: theme('colors.base.800');

    --active-brightness: 2;
    --focus-brightness: 1.5;
}

/*User prefers dark mode but has set django admin to light mode*/
@media (prefers-color-scheme: dark) {
    html:root:not([data-theme]):not(.dark),
    html:root[data-theme="auto"]:not(.dark) {
        --dca-light-mode: 1;
        --dca-dark-mode: 0;
        --dca-white: theme('colors.white');
        --dca-black: theme('colors.black');
        --dca-shadow: theme('colors.base.950');
        --dca-primary: theme('colors.primary.600');
        --dca-gray: theme('colors.base.500');
        --dca-gray-lightest: theme('colors.base.100');
        --dca-gray-lighter: theme('colors.base.200');
        --dca-gray-light: theme('colors.base.400');
        --dca-gray-darker: theme('colors.base.700');
        --dca-gray-darkest: theme('colors.base.800');
        --dca-gray-super-lightest: theme('colors.base.50');

        --active-brightness: 0.9;
        --focus-brightness: 0.95;
    }
}

@media (prefers-color-scheme: dark) {
    html.dark:root:not([data-theme]),
    html.dark:root[data-theme="auto"] {
        --dca-light-mode: 0;
        --dca-dark-mode: 1;
        --dca-white: theme('colors.base.900');
        --dca-black: theme('colors.white');
        --dca-primary: theme('colors.primary.500') !important;
        --dca-gray: theme('colors.base.300');
        --dca-gray-lightest: theme('colors.base.700');
        --dca-gray-lighter: theme('colors.base.600');
        --dca-gray-light: theme('colors.base.400');
        --dca-gray-darker: theme('colors.base.200');
        --dca-gray-darkest: theme('colors.base.100');
        --dca-gray-super-lightest: theme('colors.base.800');

        --active-brightness: 2;
        --focus-brightness: 1.5;
    }
}