@layer base {
    :focus-visible {
        outline: 0;
    }
}

@layer theme {
    :root {
        --default-font-family: "8columns", "anuphan", "poppins", "tahoma", "sans-serif";        
        --focus-outline-color: oklch(70.8% 0 0);
        --bg-color: var(--color-base-100);
        --outline-color: var(--color-base-300);
        --divider-color: var(--color-base-300);

        --context-menu-bg-color: var(--color-base-100);
        --context-menu-hover-color: var(--color-base-200);
        --context-menu-outline-color: var(--outline-color);
        --context-menu-divider-color: var(--color-base-300);

        --light-input-bg-color: transparent;
        --light-page-bg-color: #fff;
        --light-bg-color: oklch(100% 0 0);
        --light-card-bg-color: oklch(100% 0 0);
        --light-header-color: #111;
        --light-title-color: #111;
        --light-text-color: oklch(21% .006 285.885);
        --light-icon-color: var(--color-primary);
        --light-link-color: #FF9900;
        --light-outline-color: oklch(95% 0 0);
        --light-divider-color: oklch(95% 0 0);
        --light-color: oklch(95% 0 0);

        --dark-input-bg-color: rgba(0,0,0,0.05);
        --dark-page-bg-color: rgba(255,255,255,0.010);
        --dark-bg-color: oklch(25.33% .016 252.42);
        --dark-card-bg-color: rgba(255,255,255,0.025);
        --dark-header-color: #fff;
        --dark-title-color: #fff;
        --dark-text-color: oklch(97.807% .029 256.847);
        --dark-icon-color: var(--color-primary);
        --dark-link-color: #FF9900;
        --dark-outline-color: oklch(21.15% .012 254.09);
        --dark-divider-color: rgba(0,0,0,0.30);
        --dark-color: oklch(21.15% .012 254.09);        
    }

    :root[data-theme="dark"] {
        --outline-color: oklch(21.15% .012 254.09);
        --divider-color: oklch(21.15% .012 254.09);  
        --context-menu-divider-color: rgba(0,0,0,0.30);      
    }
}

@layer animations {
    .animate-spin {
        animation-name: animate-spin-180;
        animation-duration: 600ms;
        animation-timing-function: linear;
        animation-fill-mode: both;
    }

    .animate-spin-infinite {
        animation-name: animate-spin-360;
        animation-duration: 3.25s;
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
    }

    .animate-fade-out {
        animation-name: animation-fade-out;
        animation-duration: 500ms;
        animation-fill-mode: both;
    }

    .animate-fade-in {
        animation-name: animation-fade-in;
        animation-duration: 500ms;
        animation-fill-mode: both;
    }

    @keyframes animate-fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes animate-fade-out {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes animate-spin-360 {
        0% {
            transform: rotate(0);
        }

        100% {
            transform: rotate(360deg);
        }        
    }

    @keyframes animate-spin-180 {
        0% {
            transform: rotate(0);
        }

        100% {
            transform: rotate(180deg);
        }        
    }

    @keyframes animate-slide-in-from-left {
        0% {
            transform: translateX(-110%);
        }

        100% {
            transform: translateX(0);
        }        
    }
}

@layer dialogs {
    

    dialog[data-id="vimeo-overlay-dlg"] {
        .popup {
            border-radius: 0 !important;
            background-color: #000 !important;
            
            .card-body {
                padding: 0;

                placeholder {
                    aspect-ratio: 16 / 9;
                    background-color: #000;
                    
                    .loading {
                        width: 32px;
                    }                    
                }
            }

            .ux-icon-close {
                top: -11px !important;
                right: -12px !important;
                width: auto !important;
                background: #333;
                border-radius: 50%;
                padding: 4px;

                svg {
                    width: 17px !important;
                    fill: #fff !important;
                }
            }
        }
    }

    dialog[data-id="select-sku-dlg"] {
        .items {
            .item {
                cursor: pointer;
                user-select: none;

                & > * {
                    pointer-events: none;
                }  

                .currency-unit {
                    font-size: 0.75rem;
                }

                p {
                    flex-grow: 0;
                    line-height: 1.25rem;
                }

                [data-name="sub_title"] {
                    font-size: 0.8rem;
                }

                [data-name="selling-price"] {
                    font-size: 1.20rem;
                }

                & > div:last-child {
                    p:last-child {
                        font-size: 0.9rem;
                        text-align: right;
                    }
                }
            }
        }
    }
}

@layer utilities {
    :root:not([data-theme="dark"]) {
        .hide-on-light {
            display: none !important;
        }
    }

    :root[data-theme="dark"] {
        .hide-on-dark {
            display: none !important;
        }
    }

    :root[data-mode="edit"] {
        .hide-on-edit {
            display: none !important;
        }
    }

    :root:not([data-mode="edit"]) {
        .hide-on-live {
            display: none !important;
        }
    }

    .hidden {
        display: none !important;
    }

    .btn {
        border-radius: var(--btn-radius);
    }
}

@layer my-components {
    :root {
        scrollbar-width: thin;
        scrollbar-gutter: stable;

        &:has(.pswp--open) {
            scrollbar-width: none;
        }
    }

    body {
        min-height: 100vh;

        &:has(.pswp--open) {
            overflow: hidden;
        }
    }

    .hilight {
        background-color: yellow;
    }

    a {
        color: var(--light-link-color);
        text-decoration: underline;   

        &.btn {
            text-decoration: none;
        }     
    }

    .btn {
        i {
            pointer-events: none;
        }
    }

    .x-drag-handler,
    .drag-handler,
    .color-settings {
        svg {
            opacity: 0.45;
        }
    }

    [contenteditable="true"] {
        a {
            cursor: pointer;
        }
    }

    [data-role="card"] {
        outline: 1px solid var(--outline-color);
        padding: 1.5rem;
    }

    placeholder {
        background-color: var(--color-base-300);
        aspect-ratio: var(--aspect-ratio);        
        width: var(--width, auto);
        height: var(--height, auto);
        max-width: 100%;
        position: relative;
        display: grid;

        a {
            position: relative;
        }

        &[data-role="bg-container"] {
            &.ready:not([data-href=""]) {
                background-color: transparent;
            }            
        }

        &[data-role="photo"] {
            a {
                position: absolute;
                display: block;
                inset: 0;
            }
        }

        img {
            object-fit: cover;
        }

        .badge {
            position: absolute;
            top: 10px;
            left: 10px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.6s;
            background-color: var(--color-base-200);
            color: var(--text-base-content);
            outline: 1px solid var(--outline-color);
            display: none !important;
        }

        span.loading {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: var(--color-base-content);
            opacity: 1;
            transition: opacity 0.6s;
            pointer-events: none;
            color: var(--color-neutral-500);
        }

        [data-id="logo"] {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        :is(img, iframe, video, .map-container) {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;   
            transition: all 0.3s;

            &.loading {
                & + span.loading {
                    animation-name: animate-fade-in;
                    animation-duration: 300ms;
                    animation-fill-mode: both;
                    animation-timing-function: linear;
                }
            }
        }

        &.ready {
            .loading {
                opacity: 0;
            }

            &:has(img:not([src=""])) {
                background-color: transparent;


                [data-id="logo"] {
                    display: none;
                }
            }

            &:has(iframe:not([src=""])) {
                background-color: transparent;

                iframe {
                    opacity: 1;
                }

                [data-id="logo"] {
                    display: none;
                }
            }

            &:has(video:not([src=""])) {
                background-color: transparent;

                [data-id="logo"] {
                    display: none;
                }
            }

            &:has(.slideshow) {
                background-color: transparent;

                [data-id="logo"] {
                    display: none;
                }
            }

            &:has(.carousel) {
                background-color: transparent;

                [data-id="logo"] {
                    display: none;
                }
            }

            :is(img, iframe, .map-container).loaded {
                animation-name: animate-fade-in;
                animation-duration: 1000ms;
                animation-fill-mode: both;
                animation-timing-function: linear;

                & + span.loading {
                    animation-name: animate-fade-out;
                    animation-duration: 300ms;
                    animation-fill-mode: both;
                    animation-timing-function: linear;
                    animation-delay: 0.35s;
                }
            }
        }

        &.uploading {
            &[data-role="bg-container"] {
                --bg-image: none !important;

                span.loading {
                    animation-name: animate-fade-in;
                    animation-duration: 300ms;
                    animation-fill-mode: both;
                    animation-timing-function: linear;
                    animation-delay: 0.35s;                    
                }                
            }

            :is(img, .simpleParallax) {
                & + span.loading {
                    animation-name: animate-fade-in;
                    animation-duration: 300ms;
                    animation-fill-mode: both;
                    animation-timing-function: linear;
                    animation-delay: 0.35s;                    
                }
            }
        }

        &.is-loading {
            span.loading {
                animation-name: animate-fade-in;
                animation-duration: 300ms;
                animation-fill-mode: both;
                animation-timing-function: linear;
                animation-delay: 0.35s;                    
            }    

            span[data-id="logo"] {
                animation-name: animate-fade-out;
                animation-duration: 300ms;
                animation-fill-mode: both;
                animation-timing-function: linear;
                animation-delay: 0.35s;                    
            }            
        }

        &:hover {
            .badge {
                opacity: 1;
            }
        }
    }    

    input[type="text"] {
        height: auto;
        width: 100%;
        border: 0;
        outline: 1px solid var(--outline-color);
        padding: 0.25rem 0.5rem;
        line-height: 1.65rem;
        border-radius: 4px;

        &:focus-visible {
            outline: 1px solid var(--outline-color);
        }
    }

    textarea {
        border: 0;
        outline: 1px solid var(--outline-color);
        border-radius: 4px;
        padding: 0.5rem;
    }

    select {
        position: relative;
        appearance: none;
        border: 0;
        outline: 1px solid var(--outline-color);
        padding: 0.35rem 0.5rem;
        border-radius: 5px;
    
        background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNNS43MDcxMSA5LjcxMDY5QzUuMzE2NTggMTAuMTAxMiA1LjMxNjU4IDEwLjczNDQgNS43MDcxMSAxMS4xMjQ5TDEwLjU5OTMgMTYuMDEyM0MxMS4zODA1IDE2Ljc5MjcgMTIuNjQ2MyAxNi43OTI0IDEzLjQyNzEgMTYuMDExN0wxOC4zMTc0IDExLjEyMTNDMTguNzA4IDEwLjczMDggMTguNzA4IDEwLjA5NzYgMTguMzE3NCA5LjcwNzA4QzE3LjkyNjkgOS4zMTY1NSAxNy4yOTM3IDkuMzE2NTUgMTYuOTAzMiA5LjcwNzA4TDEyLjcxNzYgMTMuODkyN0MxMi4zMjcxIDE0LjI4MzMgMTEuNjkzOSAxNC4yODMyIDExLjMwMzQgMTMuODkyN0w3LjEyMTMyIDkuNzEwNjlDNi43MzA4IDkuMzIwMTYgNi4wOTc2MyA5LjMyMDE2IDUuNzA3MTEgOS43MTA2OVoiIGZpbGw9ImN1cnJlbnRDb2xvciIvPg0KPC9zdmc+);
        background-position: center right .5rem;
        background-size: 1rem auto;
        background-repeat: no-repeat;
    }

    [data-id="8columns-loading"] {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.85);
        z-index: 10;
        display: grid;
        place-content: center;
        opacity: 0;

        span.loading {
            width: 42px !important;
            color: #ccc;
        }
    }

    :root[data-mode="edit"] {
        placeholder {
            .badge {
                display: inline-flex !important;
            }
        }
    }

    :root[data-theme="dark"] {
        a {
            color: var(--dark-link-color);
        }        
    }
}

.input {
    &:focus, &:focus-within {
        outline-offset: 0;
        outline-width: 1px;
    }
}

:root {
    --radius-field: 0.25rem;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    & > header {
        &.sticky {
            position: sticky;
            top: 0;
            z-index: 3;
        }
    }

    & > main {
        flex: 1;
    }
}

:is(.dialog-will-open, .dialog-is-open) {
    #app {
        & > header {
            z-index: auto;
        }
    }
}