/* This allows the clock panel to flex into place if placed in that area */
#ui-left-column-1:has(#clock-panel) #scene-controls {
    max-height: fit-content;
    flex: 0 1 auto;
    overflow: hidden;
}

#ui-right-column-1:has(.chat-log[hidden]) #clock-panel {
    max-height: max(500px, calc(100% - 134px));
}

/* PF2e compatibility, DFred's Effects Panel, and Zhell's Visual Active Effects */
#ui-right-column-1:has(#effects-panel:not(:empty)),
#ui-right-column-1:has(#effects-panel .effect-item),
#interface:has(#visual-active-effects .effect-item) {
    #clock-panel {
        margin-right: 66px;
    }
}

/** Daggerheart compatibility, but also so that it lines up with countdowns */
#ui-right-column-1:has(#effects-display .effect-container) #clock-panel {
    margin-right: 62px;
}

#clock-panel {
    --entry-height: 34px;
    --entry-width: 190px;
    --max-entry-width: 285px; /* If this goes too high, the enter message becomes weird */

    /** We need these components to be visible, and the default is quite low */
    opacity: max(var(--ui-fade-opacity), 0.9);
    display: flex;
    flex-direction: column;
    width: fit-content;
    overflow: hidden;

    .clock-list,
    button {
        pointer-events: all;
    }

    &[data-location="topRight"] {
        max-height: max(512px, calc(100% - 480px));
        margin-left: auto;
    }

    &[data-location="bottomLeft"] {
        --max-entry-width: 190px;
        margin-top: 8px;
        flex: 1 1 0;
        justify-content: flex-end;
    }
}

.clock-display {
    --private-highlight-color: rgba(138, 80, 255);

    align-content: flex-end;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: unset;
    max-height: 100%;
    min-width: var(--entry-width);

    &.right {
        .clock-list {
            direction: rtl;
        }
    }

    &.top {
        padding-top: var(--vertical-offset);
    }

    &.bottom {
        justify-content: end;
        padding-bottom: var(--vertical-offset);
    }

    /** Flip everything when left aligned */
    &.left {
        .clock-entry:not(.tracker) {
            flex-direction: row-reverse;
            &::before {
                border-radius: calc(var(--entry-height) / 2) 4px 4px calc(var(--entry-height) / 2);
            }

            .name {
                text-align: left;
            }

            .controls {
                flex-direction: row-reverse;
            }
        }

        .main-controls {
            flex-direction: row-reverse;
        }
    }

    &.editable {
        .clock-list.editable,
        a {
            pointer-events: initial;
        }
    }

    /** Make button go above */
    &.bottom {
        flex-direction: column-reverse;
    }

    .drag-preview {
        outline: 1px solid white;
    }

    .drag-gap {
        visibility: hidden;
    }

    button.ui-control {
        width: unset;
    }

    .clock-list {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow: auto;
        scrollbar-gutter: stable;
    }

    .main-controls {
        display: flex;
        gap: 4px;
        padding: 0 2px;
        justify-content: flex-end;

        button {
            --control-size: 28px;
            font-size: var(--font-size-14);
        }
    }
}

.clock-display .clock-entry {
    border: none;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    direction: ltr;
    color: var(--control-icon-color);
    height: var(--entry-height);
    min-width: var(--entry-width);
    max-width: var(--max-entry-width);

    &:not(.tracker) {
        &::before {
            content: " ";
            position: absolute;
            width: 100%;
            height: 100%;

            border-radius: 4px calc(var(--entry-height) / 2) calc(var(--entry-height) / 2) 4px;
            background: var(--control-bg-color);
            border: 1px solid var(--control-border-color);
            z-index: 0;
        }

        &.private::before {
            border-color: var(--private-highlight-color);
            box-shadow: 0 0 3px inset var(--private-highlight-color);
        }
    }

    &.hidden {
        display: none;
    }

    .name {
        align-items: center;
        align-self: stretch;
        display: flex;
        flex: 1;
        overflow: hidden;
        padding: 0 6px;
        position: relative;
        text-align: right;
        white-space: nowrap;

        .value {
            cursor: initial;
            display: inline;
            overflow: hidden;
            font-size: var(--font-size-16);
            text-overflow: ellipsis;
            flex: 1;
            z-index: 1;

            i {
                font-size: 0.8em;
                margin-right: 0.25rem;
                margin-top: -0.2em;
                opacity: 0.95;
            }
        }
    }

    .controls {
        display: none;
        font-size: 0.85em;
        align-items: center;
        z-index: 1;
        flex: 0 0 min-content;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0 6px;
        gap: 1px;

        a {
            padding-top: 5px;
            padding-bottom: 4px;
            + .value {
                padding-left: 2px;
            }
        }
    }

    /* Show controls, hide real name, when hovering */
    &:has(.controls):hover {
        .controls {
            display: flex;
        }

        .name > .value {
            visibility: hidden;
        }
    }

    &.editable .graphic {
        cursor: pointer;
    }

    /* Tracker Styles */
    &:has(.tracker-container) {
        height: auto;
        min-height: var(--entry-height);
        background: transparent;
        border: none;
        justify-content: flex-end;
    }

    &:has(.tracker-container)::before {
        display: none;
    }

    &:has(.tracker-container) > .name {
        display: none;
    }

    &.tracker {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
        justify-content: flex-end;
        height: unset;

        .name {
            align-items: center;
            align-self: center;
            background: var(--control-bg-color);
            border-radius: 4px 4px 0 0;
            border: 1px solid var(--control-border-color);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            color: var(--control-icon-color);
            display: flex;
            font-size: 14px;
            gap: 8px;
            justify-content: space-between; 
            max-width: none;
            padding: 0 8px;
            position: relative;
            white-space: nowrap;
            width: 100%;
            flex: 1 0 1.5rem;

            .value {
                order: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: right;
                flex: 1;
            }

            .tracker-controls {
                display: none;
                order: 1;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 1px; 
                border-radius: inherit;
                flex-shrink: 0;
                font-size: 0.85em; 

                a {
                    color: white;
                    cursor: pointer;
                }
            }

            &:hover .tracker-controls {
                display: flex;
            }
        }

        &:hover .value {
            opacity: 1;
            transition: opacity 0s;
        }
    }
}

/** Styling for the actual element, separated for reusability */
#clock-panel {
    .points-element {
        background: white;
        border-radius: 25%;
        border: black 2px solid;
        color: black;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 2px;
        width: var(--entry-height);
        height: var(--entry-height);

        font-family: var(--font-sans);
        font-size: 24px;
        font-weight: 800;

        z-index: 1;
    }

    .clock-element {
        width: var(--entry-height);
        height: var(--entry-height);

        --spoke-width: 2px;

        align-self: center;
        aspect-ratio: 1 / 1;

        --filled-ratio: calc(var(--filled) / var(--max) * 1turn);
        background: conic-gradient(var(--entry-color) var(--filled-ratio), var(--entry-background) var(--filled-ratio) 1turn);
        border-radius: 50%;
        border: black var(--spoke-width) solid;

        position: relative;

        .spoke {
            width: var(--spoke-width);

            /* Make the spokes slightly larger than the inner radius so they overlay half the outer border, preventing subpixel gaps */
            height: calc(50% + 0.5 * var(--spoke-width));

            top: calc(-0.5 * var(--spoke-width));
            right: calc(50% - var(--spoke-width) / 2);

            background: black;
            position: absolute;

            transform-origin: center bottom;
            transform: rotate(calc((var(--index) * 1turn) / var(--max)));
        }
    }

    .tracker-element {
        background: var(--entry-background);
        overflow: hidden;
        flex: 1 0 1.75rem;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end; 
        padding-right: 8px;
        border: 2px solid var(--control-border-color);
        border-radius: 0 0 4px 4px;
        border-top: none;

        :where(&) .value {
            font-size: var(--font-size-18);
            font-weight: 600;
            color: white;
            z-index: 2;  
            padding: 0px 3px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 3px;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .tracker-slashes {
            position: absolute;
            height: 100%;
            width: 100%; 
            left: -4px;
            gap: 4px;
            display: flex;
            flex-direction: row;
            align-items: center;
            pointer-events: none;

            .slash {
                height: 100%;
                width: calc((100% - (var(--max) - 1) * 4px) / (var(--max) - 0.2));
                background: var(--entry-color);
                transform: skewX(-15deg);
                flex-shrink: 0;
                opacity: 0.2;
            }

            .slash.filled {
                opacity: 1;
            }
        }
    }
}