@import "./shared";
@import "./advanced";
@import "./avatar-editor";
@import "./chat";
@import "./dice";
@import "./foundry-sidebar";
@import "./health-status";
@import "./persistent/main";
@import "./popup";
@import "./sidebar/sidebar";
@import "./time";
@import "./token";
@import "./tooltip";
@import "./tracker";

:root {
    --pf2e-hud-panel-margin: 5px;
}

#ui-right-column-1 {
    padding: var(--pf2e-hud-panel-margin) 0;
}

#ui-left {
    padding: var(--pf2e-hud-panel-margin);
}

#hotbar {
    margin-bottom: var(--pf2e-hud-panel-margin);
}

#sidebar-content {
    &.pf2e-hud-dice,
    &.pf2e-hud-time {
        --chat-input-height: 65px;

        #chat {
            .chat-form,
            #chat-message {
                gap: 4px;
            }
        }
    }

    &.pf2e-hud-time {
        #chat {
            padding-top: 0;
        }

        #combat {
            margin-top: 4px;
        }
    }

    &:not(.active-chat):not(.active-combat) {
        #pf2e-hud-time {
            display: none;
        }
    }
}

.pf2e-hud-draggable {
    width: 32px;
    height: 32px;
    position: absolute;
    left: -10000px;

    img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        border: 1px solid rgb(92, 82, 24);
    }
}

.pf2e-hud-fadeout {
    opacity: 0.1;
    transition: opacity 250ms;
    pointer-events: none;
}

.pf2e-hud-colors {
    --color-rarity-uncommon: #cb8470;
    --color-rarity-rare: #5996f7;
    --color-rarity-unique: #d05fff;

    --color-rank-0: #787878;
    --color-rank-1: #6070ff;
    --color-rank-2: #b739ff;
    --color-rank-3: #bc7f05;
    --color-rank-4: #db2020;

    .rank {
        &.\30 {
            color: var(--color-rank-0);
        }

        &.\31 {
            color: var(--color-rank-1);
        }

        &.\32 {
            color: var(--color-rank-2);
        }

        &.\33 {
            color: var(--color-rank-3);
        }

        &.\34 {
            color: var(--color-rank-4);
        }
    }

    .rarity-uncommon {
        color: var(--color-rarity-uncommon);
    }

    .rarity-rare {
        color: var(--color-rarity-rare);
    }

    .rarity-unique {
        color: var(--color-rarity-unique);
    }
}

body > input[type="checkbox"].fake {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

#travel-duration {
    width: 700px;
}

.application.dialog.pf2e-hud {
    min-width: 400px;

    input.invalid {
        outline: 2px solid #970303;
    }
}