//@use "veela-lib" as m;

//
:host(ui-task) {
    //
    &, * {
        box-sizing: border-box;
        user-select: none;
        touch-action: manipulation;
        -webkit-user-drag: none;
        -webkit-tap-highlight-color: transparent;
        gap: 0px;
        margin: 0px;
        padding: 0px;
        border: 0px none transparent;
    }

    & {
        /* WHY: Without host display, desktop taskbar buttons collapse to 0×0. */
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        min-inline-size: 2.25rem;
        min-block-size: 2.25rem;
        padding-inline: 0.45rem;
        padding-block: 0.25rem;
        border-radius: 0.5rem;
        user-select: none;
        pointer-events: auto;
        box-shadow: none;
        filter: none;
        cursor: pointer;
    }

    & > * {
        pointer-events: none;
    }

    .task-icon {
        position: relative;
        display: inline-flex;
        place-content: center;
        place-items: center;
        line-height: 0;
        inline-size: 1.25rem;
        block-size: 1.25rem;
        min-inline-size: 1.25rem;
        min-block-size: 1.25rem;
    }

    .task-letter {
        position: absolute;
        inset: 0;
        display: grid;
        place-content: center;
        place-items: center;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
        color: currentColor;
        opacity: 0.92;
        z-index: 0;
        pointer-events: none;
        user-select: none;
    }

    .task-icon-glyph {
        position: relative;
        z-index: 1;
        inline-size: 100%;
        block-size: 100%;
        min-inline-size: 1rem;
        min-block-size: 1rem;
        /* WHY: blank/missing Phosphor masks leave the letter visible underneath. */
        color: currentColor;
    }

    /* When a real icon name is set, keep the letter under the glyph (not on top). */
    .task-icon:has(ui-icon[icon]:not([icon=""])) .task-letter {
        opacity: 0.35;
    }

    .task-icon:has(ui-icon[icon]:not([icon=""]):not([icon="app-window"])) .task-letter {
        opacity: 0;
    }

    .task-title {
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
        max-inline-size: 8rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

//
:host(ui-task:hover) {
    & {
        --background-tone-shift: 0.1;
        background-color: --c2-surface(var(--background-tone-shift, 0.0), var(--current));
        color: contrast-color(var(--background-tone-shift, 0.0), var(--current));
    }
}

//
:host(ui-task[data-focus]) {
    border-block-end-color: --c2-on-surface(0.0, var(--current)) !important;
}

//
:host(ui-task:not([data-active])) {
    opacity: 0.6;
}