@use "colors" as *;
@use "utility" as *;
@use "mixins" as *;
@import "_variables";
:root {
    --box-shadow-inset: 1px 1px 3px 1px rgba(0, 0, 0, 0.36) inset;
    --box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.36);
}
$tile-types: ("frame", "art", "unlinked", "default");
#slideshow-config,
.clickableImageContainer {
    .empty-state {
        @extend .padding-small;
        background-color: var(--JTCS-elevation-BG-color);
        color: var(--JTCS-text-color-on-bg);
        text-align: center;
        span.accent {
            padding-inline: 0.15rem;
            font-weight: bold;
        }
        &[data-type="art"] {
            span.accent {
                color: var(--data-art-color);
            }
        }
        &[data-type="frame"] {
            span.accent {
                color: var(--data-frame-color);
            }
        }
    }
}

#JTCSSettingsApplication,
#slideshow-config,
#JTCS-custom-dialog {
    button > i {
        margin-right: unset;
    }
    .window-content {
        --color-shadow-primary: var(--JTCS-accent-color);
        background: var(--JTCS-background-color);
        .container {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border: 1px solid var(--JTCS-background-color-30);
        }

        --flow-space: 2em;
        .flow {
            @extend .flow;
        }
        .elevation-1 {
            background: var(--JTCS-background-color);
        }
        .form-group,
        .form-group-stacked,
        .input-span {
            button {
                &.danger,
                &.theme {
                    width: 100%;
                    max-width: 300px;
                    margin-inline: auto;
                    // margin-right: auto;
                }
            }
            &.has-floating-label {
                input {
                    width: 100%;
                    max-width: 300px;
                }
                label {
                    color: var(--JTCS-text-color-on-bg);
                }
            }
            .file-picker-group {
                align-items: stretch;
                input {
                    flex: 1;
                    width: 100%;
                    max-width: 450px;
                    border: 1px solid var(--JTCS-accent-color-20);
                }
                button {
                    flex: 0;
                }
            }
            &.color-picker-container {
                input {
                    width: 100%;
                    max-width: 300px;
                }
                align-items: stretch;
                .color-picker-group {
                    flex: 0;
                    min-width: fit-content;
                }
                .color-actions {
                    flex: 0;
                }
            }
        }

        .form-group-stacked {
            --flow-space: 1em;
            p.notes {
                color: var(--JTCS-text-color-on-bg);
            }
        }
        select,
        input,
        label,
        button {
            cursor: pointer;
        }

        $selectors: (
            "p:not(.inline-notification)",
            ".file-picker-group > label",
            ".color-picker-group > label",
            "span:not(.input-span) label",
            "li:not(.accent) label",
            ".icon-button:not(.danger):not(.danger-text)"
        );
        $selectors: join($selectors, returnAllHeadings());
        // $headers: returnAllHeadings();
        $properties: (
            color: var(--JTCS-text-color-on-bg),
        );
        @include printSelectors($selectorList: $selectors, $propertyMap: $properties);

        // remove all border-bottoms on headings

        @include printSelectors(
            $selectorList: returnAllHeadings(),
            $propertyMap: (
                border-bottom: unset,
                color: var(--JTCS-accent-color),
            )
        );

        // have labels highlight with accent color
        .form-group,
        .color-picker-group,
        .file-picker-group,
        .input-span {
            &.has-floating-label {
                input {
                    height: 100%;
                }
                label {
                    white-space: nowrap;
                }
                &:hover {
                    --accent-color: var(--JTCS-accent-color);
                    label {
                        white-space: nowrap;
                        color: var(--accent-color);
                    }
                }
                &:focus {
                    outline: 1px solid var(--JTCS-accent-color);
                }
            }
        }
        .form-group,
        .form-group-stacked {
            .input-span {
                flex: 1;
                width: fit-content;
                max-width: fit-content;
            }
        }
        // remove borders from spans and list items
        span:not(.input-span):not(.tick-box):not(.tick-circle) {
            border-color: transparent;
        }

        li.tile-list-item:not(.new-tile-list-item) {
            box-shadow: var(--JTCS-box-shadow-color) 0px 1px 3px;
            background-color: var(--JTCS-tile-item-bg-color);
            .actions .icon-button {
                box-shadow: unset;
                outline: unset;
                background-color: unset;
                color: var(--JTCS-text-color-on-bg);
                transition: color 150ms ease-in-out;
                &:hover,
                &:focus {
                    box-shadow: unset;
                    outline: unset;
                    background-color: unset;
                    color: var(--JTCS-accent-color);
                }
                &.active {
                    color: var(--JTCS-accent-color);
                    filter: drop-shadow(0px 0px 2px var(--JTCS-accent-color));
                    transform: scale(1);
                    transition: transform 150ms ease-in-out;
                    &:hover,
                    &:focus {
                        transform: scale(1.12);
                    }
                }
            }
            // box-shadow: var(--JTCS-background-color-40) 0px 0px 0px 2px,
            // var(--JTCS-background-color-60) 0px 4px 6px -1px, var(--JTCS-background-color-10) 0px 1px 0px inset;
        }

        input[type="text"],
        select {
            font-family: Arial, Helvetica, sans-serif;
            border: 1px solid var(--JTCS-border-color);
            background-color: var(--JTCS-input-background-color);
            option {
                background-color: var(--JTCS-input-background-color);
                &:hover,
                &:focus {
                    background-color: var(--JTCS-accent-color);
                    color: var(--JTCS-text-color-on-fill);
                }
            }
            &:hover {
                border-color: var(--JTCS-accent-color);
            }
        }
        .color-picker-group {
            label {
                background-color: var(--JTCS-background-color);
                padding-inline: 0.15rem;
                border-radius: 3px;
            }
        }
        input[data-responsive-color]#backgroundColor {
            border: 1px solid var(--JTCS-accent-color-20);
        }

        //for neutral text
        input[type="radio"],
        input[type="text"],
        select {
            color: var(--JTCS-text-color-on-bg);
        }
        // for the list items in the slideshow config
        [data-type="art"] {
            --accent-color: var(--data-art-color);
            // border-color: var(--accent-color);
            transition: border-color 150ms ease-in;
        }

        [data-type="frame"] {
            --accent-color: var(--data-frame-color);
            // border-color: var(--accent-color);
            transition: border-color 150ms ease-in;
        }
        [data-type="unlinked"] {
            --accent-color: var(--data-unlinked-color);
            // border-color: var(--accent-color);
            transition: border-color 150ms ease-in;
        }
        [data-is-default] {
            --accent-color: var(--data-default-color);
            border-color: var(--accent-color);
            border: 2px solid var(--accent-color);
            transition: border-color 150ms ease-in, border-style 150ms ease-in;
            &:not(.accent) {
                // outline: 1px solid var(--accent-color);
                border: 2px dotted var(--accent-color);
                transition: border-color 150ms ease-out, border-style 150ms ease-in;
            }
            .badge {
                background-color: var(--accent-color);
                color: var(--JTCS-text-color-on-fill);
            }
            &:span {
                color: var(--accent-color);
            }
        }
        [data-type] {
            &:hover,
            &:focus,
            &:focus-within {
                color: var(--accent-color);
                transition: color 150ms ease-in, border-color 150 ease-in;
                .form-group.has-floating-label {
                    > label.floating-label {
                        transition: color 150ms ease-in;
                        color: var(--accent-color);
                    }
                    > input,
                    > select {
                        font-family: Arial, Helvetica, sans-serif;
                        border-color: var(--accent-color);
                        transition: border-color 150ms ease-out;
                        ::placeholder {
                            color: var(--accent-color);
                        }
                    }
                }
                &.border-accent {
                    border-color: var(--accent-color);
                    transition: border-color 150ms ease-out;
                }
            }
        }

        //for all things with a "data-type" (referring to tile), and an accent class on them
        [data-type].accent {
            color: var(--accent-color);
            transition: color 150ms ease-in, border-color 150 ease-in;

            .form-group.has-floating-label {
                > label.floating-label {
                    transition: color 150ms ease-in;
                    color: var(--accent-color);
                }
                > input,
                > select {
                    // border: unset;
                    // border-bottom: 2px solid;

                    font-family: Arial, Helvetica, sans-serif;
                    border-color: var(--accent-color);
                    transition: border-color 150ms ease-out;
                    ::placeholder {
                        color: var(--accent-color);
                    }
                }
            }
            &.border-accent {
                border-color: var(--accent-color);
                transition: border-color 150ms ease-out;
            }
            [data-type="unlinked"] {
                --accent-color: var(--data-unlinked-color);
                + label {
                    --accent-color: var(--data-unlinked-color);
                }
            }
        }
    }
    .primary {
        @include JTCS-accent-fill($hoverStyle: "border");
    }

    button {
        &.file-picker,
        &[type="button"]:not(.danger):not([data-action="scrollTo"]):not(.new-tile-button):not(.secondary):not([data-button="danger"]):not([data-button="reset"]):not(.icon-button):not(.instructions__button) {
            @include JTCS-accent-fill();
        }
    }
    .secondary {
        @include JTCS-accent-ghost();
    }
    .primary,
    .secondary {
        max-width: 300px;
    }
}

#JTCSSettingsApplication {
    // min-height: 50vh;
    height: clamp(50vh, 530px, 80vh);
    max-width: 60vw;
    header,
    footer {
        position: relative;
        &:after {
            position: absolute;
            pointer-events: none;
            content: "";
            z-index: 1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: 0px 2px 8px var(--JTCS-box-shadow-color);
        }
    }
    footer {
        &:after {
            box-shadow: 0px -2px 8px var(--JTCS-box-shadow-color);
        }
    }
    .color-picker-group {
        position: relative;
        .picker_wrapper {
            position: absolute;
            /* top: -50%; */
            z-index: 800;
            transform: translateY(-50%);
            left: 100%;
        }
    }
    .window-content {
        padding: unset;
        // overflow: hidden;
        form {
            display: flex;
            flex-direction: column;
            .form-content {
                flex: 1 1 0;
                > .form-group,
                > .form-group-stacked {
                    img.demo-img {
                        min-width: 200px;
                        width: 60%;
                        object-fit: contain;
                        margin-left: auto;
                        margin-right: auto;
                        margin-block: 1rem;
                    }
                    a {
                        display: inline-block;
                    }
                    select {
                        min-width: 200px;
                    }
                    fieldset {
                        border: unset;
                    }
                    border-radius: 8px;
                    background-color: var(--JTCS-elevation-BG-color);
                    box-shadow: 1px 0px 8px 2px var(--JTCS-box-shadow-color);
                    padding: 1rem;
                }
            }
            input[type="range"]::-webkit-slider-thumb {
                background-color: var(--JTCS-accent-color);
            }
            .range-value {
                color: var(--JTCS-accent-color);
                font-weight: bold;
            }
            p.notes {
                font-weight: 500;
                margin-bottom: unset;
                span.accent {
                    --accent-color: var(--JTCS-accent-color);
                    color: var(--JTCS-accent-color);
                }
            }
            .sheet-footer {
                flex: 0;
            }
        }
    }
}

#sheet-controls {
    z-index: 100;
    position: absolute;
    &[data-position="bottom-right"] {
        bottom: 5px;
        right: 30px;
        flex-direction: row-reverse;
    }
    &[data-position="top-left"] {
        top: 5px;
        left: 5px;
    }
    &[data-position="bottom-left"] {
        bottom: 5px;
        left: 5px;
    }
    &[data-position="top-right"] {
        bottom: 5px;
        left: 5px;
    }

    // transform: translateX(-50%);
    min-width: 65px;
    button {
        width: 36px;
        height: 36px;
        --color-shadow-primary: var(--JTCS-accent-color);
        @include JTCS-accent-fill(
            $include-shadow: false,
            $is-icon-button: true,
            $primary-color: var(--JTCS-accent-color)
        );
        // background-color: var(--JTCS-accent-color);
        &.active {
            @include JTCS-accent-fill($include-shadow: true, $is-icon-button: true);
        }
        &.JTCS-hidden {
            @extend .JTCS-hidden;
        }
    }
}

#slideshow-config {
    width: min(600px, 45vw);
    max-width: min(600px, 55vw);

    .window-content {
        --flow-space: 0.5rem;
        color: var(--color-text-primary);
        scrollbar-color: var(--JTCS-accent-color) var(--JTCS-accent-color-70);
        &::-webkit-scrollbar-track {
            background-color: var(--JTCS-accent-color-70);
        }
        &::-webkit-scrollbar-thumb {
            background-color: var(--JTCS-accent-color);
            border-color: var(--JTCS-accent-color-50);
        }

        // max-height: calc(100vh - 200px);
        // width: min(600px, 45vw);
        // max-width: min(600px, 45vw);
        header .wrapper {
            flex-wrap: wrap;

            .form-group {
                flex: 2;
            }
            .actions {
                flex: 1;
                min-width: 66px;
                max-width: 108px;
            }
        }
        #JTCS-config-instructions {
            position: relative;
            margin-top: unset;

            min-width: 200px;
            max-width: 250px;
            font-size: var(--font-size-12);
            // width: clamp(200px, 40ch, 250px);

            background-color: transparent;
            flex-shrink: 0;
            position: absolute;
            top: 20%;
            left: calc(100%);

            .instructions__content {
                border-radius: 5px;
                border-top-left-radius: 0px;
                border-top-right-radius: 0px;
                background-color: transparent;
                width: 100%;
                p,
                ul,
                ol,
                li {
                    color: var(--JTCS-text-color-on-bg);
                }
                $list: ("art", "frame", "unlinked", "default");
                @each $var in $list {
                    .#{$var}-color {
                        color: var(--data-#{$var}-color);
                        font-weight: bold;
                    }
                }

                &:before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    pointer-events: none;
                    z-index: -1;
                    border-top: 2px solid var(--JTCS-box-shadow-color);
                    background-color: var(--JTCS-background-color-00);
                    opacity: 95%;
                    backdrop-filter: blur(12px);
                    border-radius: 5px;
                    border-top-left-radius: 0px;
                    border-left: 0.25rem solid var(--JTCS-accent-color);
                    border-bottom-left-radius: 0px;
                    // filter: blur(3px);
                }
                &:not(.JTCS-hidden) {
                    padding: 1rem;
                    min-height: 10em;
                    // max-height
                }
                //     opacity: 0%;
            }
            button {
                background-color: var(--JTCS-background-color);
                border: 2px solid var(--JTCS-accent-color);
                color: var(--JTCS-accent-color);
                &.active {
                    @include JTCS-accent-fill(
                        $include-shadow: true,
                        $is-icon-button: true
                    );
                }

                // @include JTCS-accent-fill($include-shadow: true);
                position: absolute;
                // top: 0;
                bottom: 100%;
                left: 0;
                // right: 100%;
                max-width: 2rem;
                max-height: 2rem;
            }
        }
        form {
            height: 100%;
            // max-height: 80vh;
        }
        .tilesInScene {
            .wrapper {
                $tile-types: (
                    art: "art-tiles",
                    frame: "frame-tiles",
                );
                $tile-type-colors: ();
                @each $type, $selector in $tile-types {
                    &.#{$selector} {
                        h3 {
                            background-color: var(--data-#{$type}-color);
                            width: 100%;
                            color: var(--JTCS-text-color-on-fill);
                            border-top-left-radius: 8px;
                            border-top-right-radius: 8px;
                            white-space: nowrap;
                            text-align: center;
                            margin-bottom: unset;
                        }
                        .item-wrapper {
                            border-color: var(--data-#{$type}-color);
                            ul {
                                scrollbar-color: var(--data-#{$type}-color)
                                    var(--data-#{$type}-color);
                                &::-webkit-scrollbar-track {
                                    background-color: var(--JTCS-background-color-30);
                                }
                                &::-webkit-scrollbar-thumb {
                                    background-color: var(--data-#{$type}-color);
                                    border-color: var(--data-#{$type}-color);
                                    box-shadow: 0px 0px 4px var(--data-#{$type}-color);
                                }
                            }
                        }
                        .new-tile-list-item {
                            button {
                                border-radius: unset;
                                border-bottom-left-radius: 5px;
                                border-bottom-right-radius: 5px;
                                @include JTCS-accent-ghost(
                                    $primary-color: var(--data-#{$type}-color),
                                    $border-side: "-top"
                                );
                                border-width: 1px;
                                &:hover,
                                &:focus {
                                    box-shadow: unset;
                                }
                            }
                        }
                    }
                }
                h3 {
                    font-size: min(1.25em, 100%);
                }
            }

            height: 95%;
            position: relative;
            .wrapper {
                overflow: hidden;
                .item-wrapper {
                    overflow: hidden;
                }
            }

            .item-wrapper {
                display: flex;
                flex-direction: column;
                // background-color: var(--JTCS-background-color-10);
                // box-shadow: 1px 0px 8px 2px var(--JTCS-box-shadow-color);
                // max-height: 90%;
                ul {
                    flex: 1 0 0;
                    // max-height: 90%;
                }
                .new-tile-list-item {
                    flex: 0;
                    height: 100%;
                    button {
                        height: 100%;
                    }
                }
            }
        }

        .tile-list-item {
            &:focus-within {
                outline: 2px solid var(--accent-color);
            }
            select {
                height: var(--form-field-height);
            }
            // &[data-is-default] {
            //     border-width: 5px;
            //     border-color: hotpink !important;
            // }
        }
        li {
            --flow-space: 0.25em;
        }
        li .actions {
            display: flex;
            align-items: center;
            flex: 0 0 50px;
            justify-content: center;
        }
        h1,
        h2,
        h3 {
            font-weight: bold;
        }
    }
    // --color-text-primary: ;
}

.clickableImageContainer {
    display: inline-flex;
    @extend .padding-medium;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    width: fit-content;
    @extend .reset-margin;

    position: relative;

    .clickableImageControls {
        opacity: 0%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 400;
        left: 5px;
        display: flex;
        align-items: flex-start;
        // width: 100%;
        height: fit-content;

        transition: opacity 100ms ease-in;
        pointer-events: none;

        &:hover {
            opacity: 100%;
        }
    }

    .displayLocations {
        * {
            pointer-events: auto;
        }
    }

    .displayTiles {
        pointer-events: auto;
        display: flex;
        flex-wrap: wrap;
        button {
            width: fit-content;
            white-space: nowrap;
            border: unset;
            box-shadow: var(--box-shadow);
            @include JTCS-accent-fill($primary-color: var(--data-art-color));
            &[data-is-default] {
                @include JTCS-accent-fill($primary-color: var(--data-default-color));
            }
        }
        * {
            pointer-events: auto;
        }
        legend {
            background-color: inherit;
            padding: 0.5rem;
        }
        display: flex;
        flex-direction: row;
        border: none;
        color: white;
        padding: 0rem 0rem;
        min-width: 50%;
        label:first-of-type {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        label:last-of-type {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }
    }
}
.sheet.actor,
.sheet.item {
    .clickableImageContainer {
        padding: unset;
        margin: unset;
        max-width: fit-content;
        max-height: fit-content;
        // flex: 0 !important;

        .clickableImageControls {
            top: 0%;
            transform: translateY(0%);
            button.floating-control {
                background: var(--bg-color);
                border: unset;
            }
        }
    }
}

.clickableImage,
.rightClickableImage {
    border: 0px solid transparent;
    box-shadow: inset 0px 0px 2px transparent;
    outline: 2px dotted transparent;
    transition: all 100ms ease-out;
    flex: 1;
    &:hover {
        border: 2px solid var(--JTCS-accent-color);
        box-shadow: inset 2px 2px 8px rgba(50, 51, 59, 0.5);
        // outline: 2px dotted var(--JTCS-accent-color);
        cursor: pointer;
        transition: all 100ms ease-out;
        & ~ .clickableImageControls {
            opacity: 100%;
            // pointer-events: auto;
        }
    }
    &:active {
        box-shadow: inset 4px 4px 16px rgba(50, 51, 59, 0.5);
    }
}

.error {
    &::before {
        content: "⚠";
        color: var(--JTCS-danger-color);
    }
}

[data-missing="true"] {
    &:hover {
        color: var(--JTCS-warning-color);
    }
    color: var(--JTCS-danger-color);

    button:disabled {
        opacity: 50%;
        &:hover {
            cursor: not-allowed;
        }
    }
}

.unlinked-tiles-list {
    padding-block: 2em;
    h3 {
        color: var(--accent-color);
    }
    ul {
        background-color: var(--JTCS-elevation-BG-color);
    }
    li {
        margin: unset;
        list-style-type: none;
        padding: unset;
        .input-span[data-variant="visible-tick"] {
            display: flex;
            height: 100%;
            width: 100%;
            align-items: center;
            input[type="radio"] {
                margin-right: 0.5rem;
                padding: 1rem;
                & + label {
                    display: flex;
                    gap: 1rem;
                    color: var(--JTCS-text-color-on-bg);
                    border: unset;
                    border-bottom: 1px solid var(--JTCS-accent-color);
                    --border-color: var(--data-unlinked-color);
                    transition: color 150ms ease-in, background-color 150ms ease-in,
                        border-color 150ms ease-in;
                    .tick-box,
                    .tick-circle {
                        border-color: var(--JTCS-accent-color);
                    }
                    &:hover {
                        background-color: var(--data-unlinked-color);
                        color: var(--JTCS-text-color-on-fill);
                        border-color: var(--data-unlinked-color);
                        .tick-box,
                        .tick-circle {
                            transition: border-color 150ms ease-in;
                            border-color: var(--data-unlinked-color);
                        }
                    }
                }
            }
            label {
                padding: 1rem;
                height: 100%;
                width: 100%;
            }
        }
    }
}