#pf2e-hud-health-status {
    --outer-padding: 1em;
    --highlight-background: #ffffff12;
    --line-marker-color: #ffffff5c;

    max-height: 90%;
    height: 90%;

    .window-content {
        padding: 0.5em 0;
    }

    .menu {
        padding-inline: var(--outer-padding);
        display: flex;
        align-items: center;
        justify-content: space-between;

        label {
            display: inline-flex;
            align-items: center;
        }

        .controls {
            display: flex;
            align-items: center;
            gap: 0.7em;
            font-size: 1.2em;
        }
    }

    hr {
        background: none;
        margin: 0.5em 0;
        border-bottom: 1px solid var(--color-border-dark-secondary);
    }

    .scroll {
        flex: 1;
        overflow: hidden auto;
    }

    .frise {
        --row-height: 2.286em;
        --row-inline-gap: 1em;
        --line-width: 4px;
        --marker-width: 3.4em;

        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .line {
            position: absolute;
            top: calc(1em + 1px);
            bottom: calc(1em + 1px);
            left: calc(var(--outer-padding) + var(--marker-width) / 2 - var(--line-width) / 2);
            width: var(--line-width);
            z-index: -1;
            background: linear-gradient(to bottom, #008000, #ff0000);
        }

        a {
            width: fit-content;

            &:not(:hover) {
                opacity: 0.3;
            }
        }

        input {
            padding: 0 0.3em;
            height: 1.8em;
            color: var(--color-text-primary);
        }

        .entry {
            &:has(.marker:hover) {
                background: var(--highlight-background);
            }

            &:has(.add:hover) {
                box-shadow: inset 0 1px 0 var(--line-marker-color);
            }
        }

        .marker,
        .range {
            position: relative;
            padding-inline: var(--outer-padding);
            height: var(--row-height);
            display: grid;
            grid-template-columns: var(--marker-width) 20em;
            align-items: center;
            gap: var(--row-inline-gap);

            input {
                grid-column: 2;
            }
        }

        .marker {
            .value {
                position: relative;

                input {
                    text-align: end;
                    padding-inline: 0.3em 1.3em;
                }

                &:after {
                    content: "%";
                    position: absolute;
                    right: 0.3em;
                    top: calc(50% - 1px);
                    transform: translateY(-50%);
                }
            }
        }

        .range {
            .add {
                margin-left: 50%;
                transform: translateX(-50%);
            }
        }
    }

    .buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding-inline: 0.5em;
        gap: 0.5em;
        margin-top: 0.5em;
    }
}

body.theme-light #pf2e-hud-health-status {
    --highlight-background: #00000017;
    --line-marker-color: #00000069;

    input {
        --input-background-color: #c6c4b8;

        &:disabled {
            --input-background-color: #aeaca2;
        }
    }
}