@source "../../flux-pro/stubs";
@source "../stubs";

@theme {
    --color-accent: var(--color-zinc-800);
    --color-accent-content: var(--color-zinc-800);
    --color-accent-foreground: var(--color-white);
}

@layer theme {
    .dark {
        --color-accent: var(--color-white);
        --color-accent-content: var(--color-white);
        --color-accent-foreground: var(--color-zinc-800);
    }
}

@keyframes flux-shimmer {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(200%);
    }
}

*:has(>[data-flux-main]) {
    display: grid;
    grid-area: body;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: min-content minmax(0, 1fr) min-content;
    grid-template-areas:
        "header  header  header"
        "sidebar main    aside"
        "sidebar footer  aside";
}

*:has(>[data-flux-sidebar]+[data-flux-header]) {
    grid-template-areas:
        "sidebar header  header"
        "sidebar main    aside"
        "sidebar footer  aside";
}

/*
Transition dialogs with fade a slight scale effect...
*/
[data-flux-modal] > dialog, [data-flux-modal] > dialog::backdrop {
    opacity: 0;
    transition: all 0.075s allow-discrete;
}

[data-flux-modal] > dialog { transform: scale(0.95); }

[data-flux-modal] > dialog[data-flux-flyout] { transform: scale(1) var(--flux-flyout-translate, var(--fx-flyout-translate, translateX(50px))); }

[data-flux-modal] > dialog[open], [data-flux-modal] > dialog[open]::backdrop {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: all 0.15s allow-discrete;
}

@starting-style {
    [data-flux-modal] > dialog[open], [data-flux-modal] > dialog[open]::backdrop {
        opacity: 0;
    }

    [data-flux-modal] > dialog[open] {
        transform: scale(0.95);
    }

    [data-flux-modal] > dialog[open][data-flux-flyout] { transform: scale(1) var(--flux-flyout-translate, var(--fx-flyout-translate, translateX(50px))); }
}

[data-flux-modal] > dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.10);
}

/*
Transition content of dialogs with scroll="body"
*/
[data-flux-modal] > dialog[data-flux-modal-overflow] {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-y: auto;
    background: transparent;
    transform: none;
}

[data-flux-modal-content] {
    transform: scale(0.95);
    transition: transform 0.075s allow-discrete;
}

dialog[open] [data-flux-modal-content] {
    transform: scale(1);
    transition: transform 0.15s allow-discrete;
}

@starting-style {
    dialog[open] [data-flux-modal-content] {
        transform: scale(0.95);
    }
}

/**
Native select styles...
*/
select[data-flux-select-native] {
    background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 9L12 5L16 9' stroke='%23d4d4d4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M16 15L12 19L8 15' stroke='%23d4d4d4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-inline-end: 2.5rem;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

[dir="rtl"] select[data-flux-select-native] {
    background-position: left .5rem center;
}

select[data-flux-select-native]:hover:not(:disabled) {
    background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 9L12 5L16 9' stroke='%2327272a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M16 15L12 19L8 15' stroke='%2327272a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.dark select[data-flux-select-native] {
    background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 9L12 5L16 9' stroke='%23A1A1AA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M16 15L12 19L8 15' stroke='%23A1A1AA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.dark select[data-flux-select-native]:hover:not(:disabled) {
    background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 9L12 5L16 9' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M16 15L12 19L8 15' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

/**
Custom element display rules...
*/
@layer base {
    ui-button { display: block; }
    ui-label { display: inline-block; cursor: default; }
    ui-description { display: block; }
    ui-legend { display: block; }
    ui-select { display: block; }
    ui-selected-option { display: contents; }
    ui-options:not([popover]), ui-option { display: block; cursor: default; }
    ui-option-create { display: block; cursor: default; }
    ui-option-empty { display: block; cursor: default; }
    ui-empty { display: block; cursor: default; }
    ui-pillbox { display: block; }
    ui-checkbox-group { display: block; }
    ui-checkbox { display: inline-block; user-select: none; }
    ui-switch { display: inline-block; user-select: none; }
    ui-radio-group { display: block; }
    ui-radio { display: inline-block; user-select: none; }
    ui-date-picker { display: block; }
    ui-time-picker { display: block; }
    ui-calendar { display: block; }
    ui-calendar-preset, ui-calendar-previous, ui-calendar-next, ui-calender-next { display: block; user-select: none; }
    ui-menu[popover]:popover-open { display: block; }
    ui-menu[popover].\:popover-open { display: block; }
    ui-menu-checkbox, ui-menu-radio { cursor: default; display: contents; }
    ui-disclosure { display: block; }
    ui-tab-group, ui-tabs { display: block; cursor: default; }
    ui-resizable { display: block; }
    ui-composer { display: block; }
    ui-editor { display: block; }
    ui-editor-content { display: block; }
    ui-progress { display: block; }
    ui-carousel, ui-carousel-track, ui-carousel-slide { display: block; }
}

/**
Toast styles...
*/
ui-toast {
    margin: 1.5rem;
    max-width: 24rem;
    overflow: visible;
    background-color: transparent;

    &[position*="top"] {
        margin-bottom: auto;
    }

    &[position*="bottom"] {
        margin-top: auto;
    }

    &[position*="left"],
    &[position*="start"] {
        margin-inline-end: auto;
    }

    &[position*="center"] {
        margin-left: auto;
        margin-right: auto;
    }

    &[position*="right"],
    &[position*="end"] {
        margin-inline-start: auto;
    }

    [data-flux-toast-dialog] {
        opacity: 0;
        transform: translate(0);
        transition: opacity 0.35s allow-discrete, transform 0.35s allow-discrete, height 0.35s allow-discrete;

        &.showing {
            opacity: 1;
            transform: translate(0);
            transition: opacity 0.2s allow-discrete, transform 0.2s allow-discrete, height 0.2s allow-discrete;
        }
    }

    @starting-style {
        & {
            [data-flux-toast-dialog] {
                opacity: 0;
                transform: translate(0);
            }

            &[position*="top"] > [data-flux-toast-dialog] {
                transform: translateY(-0.5rem);
            }

            &[position*="top"][position*="left"] > [data-flux-toast-dialog] {
                transform: translateX(-0.5rem);
            }

            &[position*="top"][position*="right"] > [data-flux-toast-dialog] {
                transform: translateX(0.5rem);
            }

            [dir="rtl"] &[position*="top"][position*="left"] > [data-flux-toast-dialog] {
                transform: translateX(0.5rem);
            }

            [dir="rtl"] &[position*="top"][position*="right"] > [data-flux-toast-dialog] {
                transform: translateX(-0.5rem);
            }

            &[position*="bottom"] > [data-flux-toast-dialog] {
                transform: translateY(0.5rem);
            }
        }
    }
}

ui-toast-group {
    margin: 1.5rem;
    width: 24rem;
    overflow: visible;
    background-color: transparent;
    display: flex;

    &[position*="top"] {
        margin-bottom: auto;
    }

    &[position*="bottom"] {
        margin-top: auto;
    }

    &[position*="left"],
    &[position*="start"] {
        margin-inline-end: auto;
        justify-content: flex-start;
    }

    &[position*="center"] {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    &[position*="right"],
    &[position*="end"] {
        margin-inline-start: auto;
        justify-content: flex-end;
    }

    [data-flux-toast-dialog] {
        position: absolute;
        transform: translate(0);
        transition: opacity 0.35s allow-discrete, transform 0.35s allow-discrete, height 0.35s allow-discrete;

        [position*="top"] & {
            top: 0;
            padding-bottom: 0.75rem;
        }

        [position*="bottom"] & {
            bottom: 0;
            padding-top: 0.75rem;
        }

        & > * {
            transition: opacity 0.35s allow-discrete, transform 0.35s allow-discrete, height 0.35s allow-discrete;
        }
    }
}

/**
Utilties
*/
.flux-no-scrollbar {
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.flux-no-scrollbar::-webkit-scrollbar{
    display:none
}

.has-focus-visible\:outline-default {
    &:has(*:focus-visible) {
        outline: auto;
        outline-color: Highlight;
        outline-color: -webkit-focus-ring-color;
    }
}

/**
Timeline
*/

/* Variables:
/* ------------------------------------------------------------ */
@layer components {
    :where([data-flux-timeline]) {
        --flux-timeline-item-gap: calc(var(--spacing) * 4);
        --flux-timeline-item-offset: 0px;
        --flux-timeline-content-gap: calc(var(--spacing) * 3);
        --flux-timeline-line-gap: var(--spacing);
        --flux-timeline-line-width: 1px;
        --flux-timeline-indicator-size: calc(var(--spacing) * 8);
    }

    :where([data-flux-timeline-horizontal]) {
        --flux-timeline-content-gap: calc(var(--spacing) * 2);
    }

    :where([data-flux-timeline][data-flux-timeline-size="lg"]) {
        --flux-timeline-item-gap: calc(var(--spacing) * 8);
        --flux-timeline-content-gap: calc(var(--spacing) * 4);
        --flux-timeline-line-gap: 0px;
        --flux-timeline-line-width: 2px;
    }

    :where([data-flux-timeline-size="lg"]) {
        --flux-timeline-indicator-size: calc(var(--spacing) * 12);
    }

    :where([data-flux-timeline-horizontal][data-flux-timeline-size="lg"]),
    :where([data-flux-timeline-horizontal] [data-flux-timeline-size="lg"]) {
        --flux-timeline-item-gap: calc(var(--spacing) * 4);
        --flux-timeline-content-gap: calc(var(--spacing) * 3);
    }
}

/** Layouts
/* ------------------------------------------------------------ */
[data-flux-timeline] {
    display: grid;
    grid-template-columns: var(--flux-timeline-item-offset) auto var(--flux-timeline-content-gap) 1fr;

    [data-flux-timeline-item] {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 2 / -1;
        grid-template-rows: auto 1fr auto 1fr auto;

        &:has([data-flux-timeline-block]) {
            grid-column: 1 / -1;
        }

        &:not(:first-child) [data-flux-timeline-gap-leading] {
            min-height: calc(var(--flux-timeline-item-gap)/2);
        }

        &:not(:last-child) [data-flux-timeline-gap-trailing] {
            min-height: calc(var(--flux-timeline-item-gap)/2);
        }

        &:first-child [data-flux-timeline-line-leading] {
            opacity: 0;
        }

        &:last-child [data-flux-timeline-line-trailing] {
            opacity: 0;
        }
    }

    [data-flux-timeline-indicator] {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
    }

    [data-flux-timeline-content] {
        grid-column: 3;
        grid-row: 2 / 5;
        align-self: center;
        min-width: 0;
    }

    [data-flux-timeline-line-leading] {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    [data-flux-timeline-line-trailing] {
        grid-column: 1;
        grid-row: 4 / -1;
    }

    [data-flux-timeline-gap-leading] {
        grid-column: 3;
        grid-row: 1;
    }

    [data-flux-timeline-gap-trailing] {
        grid-column: 3;
        grid-row: 5;
    }
}

[data-flux-timeline][data-flux-timeline-horizontal] {
    grid-template-columns: initial;
    grid-template-rows: auto var(--flux-timeline-content-gap) 1fr;

    [data-flux-timeline-item] {
        grid-template-rows: subgrid;
        grid-row: 1 / -1;
        grid-column: initial;
        grid-template-columns: auto 1fr auto 1fr auto;

        &:not(:first-child) [data-flux-timeline-gap-leading] {
            min-width: calc(var(--flux-timeline-item-gap)/2);
        }

        &:not(:last-child) [data-flux-timeline-gap-trailing] {
            min-width: calc(var(--flux-timeline-item-gap)/2);
        }
    }

    [data-flux-timeline-indicator] {
        grid-row: 1;
        grid-column: 3;
        justify-self: initial;
        align-self: center;
    }

    [data-flux-timeline-content] {
        grid-row: 3;
        justify-self: center;
        align-self: initial;
        grid-column: 2 / 5;
    }

    [data-flux-timeline-line-leading] {
        grid-row: 1;
        justify-self: stretch;
        grid-column: 1 / 3;
    }

    [data-flux-timeline-line-trailing] {
        grid-row: 1;
        justify-self: stretch;
        grid-column: 4 / -1;
    }

    [data-flux-timeline-gap-leading] {
        grid-row: 3;
        grid-column: 1;
    }

    [data-flux-timeline-gap-trailing] {
        grid-row: 3;
        grid-column: 5;
    }
}

[data-flux-timeline][data-flux-timeline-horizontal="inline"] {
    grid-template-rows: auto;

    [data-flux-timeline-item] {
        grid-template-columns: auto auto auto auto 1fr;
    }

    [data-flux-timeline-content] {
        padding-left: var(--flux-timeline-content-gap);
        padding-right: var(--flux-timeline-content-gap);
        grid-row: 1;
        grid-column: 4;
    }

    [data-flux-timeline-line-leading] {
        grid-row: 1;
        grid-column: 1 / 3;
    }

    [data-flux-timeline-line-trailing] {
        grid-row: 1;
        grid-column: 5;
    }

    [data-flux-timeline-gap-leading] {
        grid-row: 1;
        grid-column: 1;
    }

    [data-flux-timeline-gap-trailing] {
        grid-row: 1;
        grid-column: 5;
    }
}

/** Lines
/* ------------------------------------------------------------ */
[data-flux-timeline-item]:not(:first-child) [data-flux-timeline-line-leading],
[data-flux-timeline-item] [data-flux-timeline-line-trailing] {
    display: flex;
    flex-direction: column;
    align-items: center;

    * {
        width: var(--flux-timeline-line-width);
        height: calc(100% - var(--flux-timeline-line-gap));
    }
}

[data-flux-timeline-item]:not(:first-child) [data-flux-timeline-line-leading] {
    justify-content: start;
}

[data-flux-timeline-item] [data-flux-timeline-line-trailing] {
    justify-content: end;
}

[data-flux-timeline-horizontal] [data-flux-timeline-item] :is([data-flux-timeline-line-leading], [data-flux-timeline-line-trailing]) {
    justify-content: center;
    align-items: initial;

    * {
        height: var(--flux-timeline-line-width);
        width: calc(100% - var(--flux-timeline-line-gap));
    }
}

[data-flux-timeline-horizontal] [data-flux-timeline-item] [data-flux-timeline-line-leading] {
    align-items: start;
}

[data-flux-timeline-horizontal] [data-flux-timeline-item] [data-flux-timeline-line-trailing] {
    align-items: end;
}

/* Alignment:
/* ------------------------------------------------------------ */

/* Vertical alignment */
[data-flux-timeline]:not([data-flux-timeline-horizontal])[data-flux-timeline-align="start"] {
    [data-flux-timeline-item] {
        grid-template-rows: auto auto auto 1fr auto;
    }

    [data-flux-timeline-content] {
        align-self: start;
    }
}

[data-flux-timeline]:not([data-flux-timeline-horizontal]) [data-flux-timeline-item][data-flux-timeline-align="start"] {
    grid-template-rows: auto auto auto 1fr auto;

    [data-flux-timeline-content] {
        align-self: start;
    }
}

[data-flux-timeline]:not([data-flux-timeline-horizontal])[data-flux-timeline-align="end"] {
    [data-flux-timeline-item] {
        grid-template-rows: auto 1fr auto auto auto;
    }

    [data-flux-timeline-content] {
        align-self: end;
    }
}

[data-flux-timeline]:not([data-flux-timeline-horizontal]) [data-flux-timeline-item][data-flux-timeline-align="end"] {
    grid-template-rows: auto 1fr auto auto auto;

    [data-flux-timeline-content] {
        align-self: end;
    }
}

[data-flux-timeline]:not([data-flux-timeline-horizontal])[data-flux-timeline-align="baseline"] {
    [data-flux-timeline-item] {
        grid-template-rows: auto auto auto 1fr auto;
    }

    [data-flux-timeline-content] {
        align-self: baseline;
        grid-row: 3 / 5;
    }

    [data-flux-timeline-indicator] {
        align-self: baseline;
    }
}

[data-flux-timeline]:not([data-flux-timeline-horizontal]) [data-flux-timeline-item][data-flux-timeline-align="baseline"] {
    grid-template-rows: auto auto auto 1fr auto;

    [data-flux-timeline-content] {
        align-self: baseline;
        grid-row: 3 / 5;
    }

    [data-flux-timeline-indicator] {
        align-self: baseline;
    }
}

/* Horizontal alignment */
[data-flux-timeline][data-flux-timeline-horizontal][data-flux-timeline-align="start"],
[data-flux-timeline][data-flux-timeline-horizontal][data-flux-timeline-align="baseline"] {
    [data-flux-timeline-item] {
        grid-template-columns: auto auto auto 1fr auto;
    }

    [data-flux-timeline-content] {
        justify-self: start;
    }
}

[data-flux-timeline][data-flux-timeline-horizontal] [data-flux-timeline-item]:is([data-flux-timeline-align="start"], [data-flux-timeline-align="baseline"]) {
    grid-template-columns: auto auto auto 1fr auto;

    [data-flux-timeline-content] {
        justify-self: start;
    }
}

[data-flux-timeline][data-flux-timeline-horizontal][data-flux-timeline-align="end"] {
    [data-flux-timeline-item] {
        grid-template-columns: auto 1fr auto auto auto;
    }

    [data-flux-timeline-content] {
        justify-self: end;
    }
}

[data-flux-timeline][data-flux-timeline-horizontal] [data-flux-timeline-item][data-flux-timeline-align="end"] {
    grid-template-columns: auto 1fr auto auto auto;

    [data-flux-timeline-content] {
        justify-self: end;
    }
}

/** Block item
/* ------------------------------------------------------------ */
[data-flux-timeline]:has([data-flux-timeline-block]) {
    --flux-timeline-item-offset: calc(var(--spacing) * 3);
}

[data-flux-timeline-item] [data-flux-timeline-block] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    grid-row: 2 / 5;

    [data-flux-timeline-subgrid] {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;

        & > :nth-child(1) {
            grid-column: 2;
            justify-self: center;
        }

        & > :nth-child(2) {
            grid-column: 4;
        }
    }

    & > :not([data-flux-timeline-subgrid]) {
        grid-column: 1 / -1;
    }
}

[data-flux-timeline-item] [data-flux-timeline-line-leading]:has(~[data-flux-timeline-block]) {
    grid-column: 2;
    grid-row: 1 / 2;

    * { height: 100% !important; }
}

[data-flux-timeline-item] [data-flux-timeline-block]~[data-flux-timeline-line-trailing] {
    grid-column: 2;
    grid-row: 5 / -1;

    * { height: 100% !important; }
}

[data-flux-timeline-item]:not(:first-child) [data-flux-timeline-gap-leading]:has(~[data-flux-timeline-block]) {
    height: var(--flux-timeline-item-gap);
}

[data-flux-timeline-item]:not(:last-child) [data-flux-timeline-block]~[data-flux-timeline-gap-trailing] {
    height: var(--flux-timeline-item-gap);
}