* {
    --path: polygon(0 100%, calc(100% - var(--tip-size)) 100%, 100% calc(100% - var(--tip-size) / 3 * 2), 100% 0, var(--tip-size) 0, 0 calc(var(--tip-size) / 3 * 2)) !important;
}

.kanban {
    overflow-x: auto;
    white-space: nowrap;
    width: calc(100vw - 10em);

    & > div {
        display: inline-flex;
        width: 400px;
        vertical-align: top;
        margin-inline: 0.25em;
    }

    & .kanban-tile {
        margin-block: 0 !important;

        & [role="kanban-tile-title"] {
            width: 100%;
            white-space: normal;
        }
    }
}

@media screen and (max-width: 550px) {
    .kanban {
        & > div {
            width: calc(100% - 3em);
        }
    }
}

.ms-cost-row {
    grid-template-columns: 3fr repeat(5, 1fr);

    &:hover {
        background-color: var(--bg-lite);
    }

    & > .number {
        text-align: right;
    }
}

.project-logo {
    background-color: var(--accent-color);

    & > .icon {
        font-size: 10em;
    }
}

.status-bar {
    & > h3 {
        text-align: center;
        color: currentColor;
    }

    & > [role="bars"] {
        display: grid;
        --bar-size: 1em;
        grid-template-columns: repeat(var(--max-index), 1fr);
        margin: 0.5em;
        column-gap: calc(var(--bar-size) * 1.5);
        padding: 0 0 0 calc(var(--bar-size) / 2);

        & > [role="cell"] {
            color: var(--bg-lite);
            background-color: currentColor;
            height: var(--bar-size);
            position: relative;
            border-radius: 0;

            &::before, &::after{
                content: "";
                position: absolute;
                border: calc(var(--bar-size) / 2) solid transparent;
                box-sizing: border-box;
                width: var(--bar-size);
                height: var(--bar-size);
            }
            &::before {
                left: calc(-1 * var(--bar-size));
                border-top-color: inherit;
                border-right-color: inherit;
                border-bottom-color: inherit;
            }
            &::after {
                right: calc(-1 * var(--bar-size));
                border-left-color: inherit;
            }

            &:first-child::before {
                border: none;
                background-color: currentColor;
            }
            &:last-child::after {
                border: none;
                background-color: currentColor;
                right: calc(-1 * var(--bar-size) / 2);
            }
        }

        & .highlighted {
            color: rgb(var(--q-clr));
        }
    }
}

.status-bar > h3,
.tile-title {
    margin: 0;
}