daggerheart/styles/less/ui/countdown/countdown.less

@import '../../utils/colors.less';
@import '../../utils/fonts.less';

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

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

.daggerheart.dh-style.countdowns {    
    position: relative;
    border: 0;
    box-shadow: none;
    color: var(--color-text-primary);
    width: 300px;
    pointer-events: all;
    align-self: flex-end;
    transition: 0.3s right ease-in-out;

    display: flex;
    flex-direction: column;

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

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

    &:hover::before {
        opacity: 1;
    }

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

    &.icon-only {
        width: 180px;
        min-width: 180px;
    }

    .countdowns-header,
    .countdowns-container {
        position: relative; // allow rendering over the background
    }

    .countdowns-header {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex: 0 0 36px;
        padding: 0 0.5rem;
        overflow: hidden;
        font-size: var(--font-size-13);
        .window-title {
            font-family: @font-body;
            flex: 1;
        }
        .header-control + .header-control {
            margin-left: 8px;
        }
    }

    .countdowns-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px var(--spacer-16) var(--spacer-16) var(--spacer-16);
        overflow: auto;
        max-height: 312px;

        .countdown-container {
            display: flex;
            width: 100%;

            &.icon-only {
                gap: 8px;

                .countdown-main-container {
                    .countdown-content {
                        justify-content: center;

                        .countdown-tools {
                            gap: 8px;
                        }
                    }
                }
            }

            .countdown-main-container {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 16px;

                img {
                    width: 44px;
                    height: 44px;
                    border-radius: 6px;
                }

                .countdown-content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .countdown-tools {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .countdown-tool-controls {
                            display: flex;
                            align-items: center;
                            gap: 16px;
                        }

                        .progress-tag {
                            border: 1px solid;
                            border-radius: 4px;
                            padding: 2px 4px;
                            background-color: light-dark(@beige, @dark-blue);
                        }

                        .countdown-tool-icons {
                            display: flex;
                            align-items: center;
                            gap: 8px;

                            .looping-container {
                                position: relative;
                                border: 1px solid light-dark(@dark-blue, white);
                                border-radius: 6px;
                                padding: 2px 4px;

                                &.should-loop {
                                    background: light-dark(@golden, @golden);

                                    .loop-marker {
                                        color: light-dark(@dark-blue, @dark-blue);
                                    }
                                }

                                .direction-marker {
                                    position: absolute;
                                    font-size: 10px;
                                    filter: drop-shadow(0 0 3px black);
                                    top: -3px;
                                }
                            }
                        }
                    }
                }
            }
            /* Keep incase we want to reintroduce the player pips */
            // .countdown-access-container {
            //     display: grid;
            //     grid-template-columns: 1fr 1fr 1fr;
            //     grid-auto-rows: min-content;
            //     width: 38px;
            //     gap: 4px;

            //     .countdown-access {
            //         height: 10px;
            //         width: 10px;
            //         border-radius: 50%;
            //         border: 1px solid light-dark(@dark-blue, @beige-80);
            //         content: '';
            //     }
            // }
        }
    }
}