:root {
    --hotbar-size: 60px;
}

#interface.theme-dark,
body.theme-dark {
    .daggerheart.dh-style.fear-tracker {
        --background: url(../assets/parchments/dh-parchment-dark.png);
    }
}

#interface.theme-light,
body.theme-light {
    .daggerheart.dh-style.fear-tracker {
        --background: url('../assets/parchments/dh-parchment-light.png') no-repeat center;
    }
}

#ui-middle:has(#hotbar.sm),
#ui-middle:has(#hotbar.md.offset) {
    #resources {
        &.top-center,
        &.bottom-center {
            width: calc((var(--hotbar-size) * 5) + 32px) !important;
        }
    }
}

#resources {
    position: static;
    min-height: calc(var(--header-height) + 4rem);
    min-width: 4rem;
    color: #d3d3d3;
    pointer-events: all;
    padding: var(--spacer-8);
    max-width: 540px;
    min-width: 100px;

    &::before {
        content: ' ';
        position: absolute;
        inset: 0;
        background: var(--background);
        border-radius: 8px;
        opacity: var(--ui-fade-opacity);
        transition: opacity var(--ui-fade-delay) var(--ui-fade-duration);
        
    }

    &:hover::before {
        opacity: 1;
        transition: opacity var(--ui-fade-duration);
    }

    &.free {
        position: absolute;
    }

    &.top-center,
    &.bottom-center {
        margin: 1rem 0;
        width: 100% !important;
        transform: translateX(var(--offset));
        transition: all 250ms ease;
    }

    &.right-top {
        width: 300px;
        max-width: 300px;
    }

    &.left-bottom {
        width: 200px;
        max-width: 200px;
        background: transparent;
    }

    &:not(.performance-low, .noblur) {
        backdrop-filter: blur(5px);
    }

    #ui-right:has(#effects-display .effect-container) & {
        right: 62px;
    }

    #resource-fear {
        position: relative;

        &:hover {
            .fear-header {
                opacity: 1;
                height: 18.75px;
                visibility: visible;
            }

            .resize-handle {
                opacity: 1;
            }
        }

        .fear-header {
            display: flex;
            gap: 5px;
            pointer-events: all;
            margin-bottom: 0.5rem;
            opacity: 0;
            height: 0;
            visibility: hidden;
            transition: all 0.3s ease;

            .drag-handle {
                cursor: grab;
            }

            .fear-title {
                font-size: var(--font-size-13);
            }
        }
        
        .fear-tokens {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem 0.25rem;

            .fear-token {
                font-size: var(--font-size-16);
                border: 1.5px double light-dark(@dark-15, @dark-golden-80);
                border-radius: 50%;
                aspect-ratio: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 2.5rem;
                background-color: @primary-color-fear;
                color: @beige;
                flex-grow: 0;
                text-shadow: none;

                &.inactive {
                    filter: grayscale(1) !important;
                    opacity: 0.5;
                }
            }
        }

        .resize-handle {
            position: absolute;
            bottom: -12px;
            right: -9px;
            cursor: nwse-resize;
            opacity: 0;
            transition: all 0.3s ease;
        }
        

        .resource-bar {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            height: 30px;
            width: 100%;

            .progress-bar {
                position: absolute;
                appearance: none;
                width: 100%;
                height: 100%;
                border: 1px solid light-dark(@dark-15, @dark-golden-80);
                border-radius: 999px;
                z-index: 0;
                background: @dark-blue;

                &::-webkit-progress-bar {
                    border: none;
                    background: @dark-blue;
                    border-radius: 999px;
                }
                &::-webkit-progress-value {
                    background: linear-gradient(90deg, rgba(2, 0, 38, 1) 0%, rgba(199, 1, 252, 1) 100%);
                    border-radius: 999px;
                }
            }

            .label {
                margin: auto 0;
                z-index: 2;
                height: auto;
                text-align: center;
                font-size: var(--font-size-18);
                color: @beige;
            }
        }

        .controls {
            display: flex;
            gap: 8px;
            justify-content: center;
            align-items: center;
            margin-top: 0.5rem;
            color: light-dark(@dark, @beige);

            .disabled {
                opacity: 0.5;
            }
        }

        &.isGM {
            .fear-token {
                cursor: pointer;
                transition: box-shadow 0.15s ease;

                &:hover {
                    box-shadow: 0 0 8px @primary-color-fear ;
                }
            }
        }
    }
}