/***** PROGRESS DOT *****/
:host([base=time]) {
    --background-color: var(--blue);
    --border-color: var(--blueHover);
    --outline-color: #3498db80;
    --outline-color: color(from var(--blue) srgb r g b / .5);
}

:host([base=quality]) {
    --background-color: var(--yellow);
    --border-color: var(--orange);
    --outline-color: #f1c40f80;
    --outline-color: color(from var(--yellow) srgb r g b / .5);
}

.progress-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;

    border: 1.25px solid transparent;

    position: relative;
    background-color: white;
    cursor: pointer;
    overflow: hidden;
}

@media screen and (hover: hover) {
    .progress-dot:hover {
        outline: 3px solid #bdc3c780;
        outline: 3px solid color(from var(--gray) srgb r g b / .5);
    }
}

.progress-dot.full {
    background-color: var(--background-color);
    border-color: var(--border-color);
}

.progress-dot.partial,
.progress-dot.empty {
    border-color: var(--darkGray);
}

.progress-dot.partial::before {
    content: '';
    opacity: .5;
    background-color: var(--background-color);
    display: block;
    position: absolute;

    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
}

.progress-dot.blocked::after {
    content: '';
    background-color: var(--darkGray);
    display: block;
    position: absolute;

    left: 0;
    top: 35%;
    width: 100%;
    height: 30%;
}

.progress-dot.blocked.full::after {
    background-color: var(--border-color);
}

:host([current]) .progress-dot {
    outline: 3px solid var(--outline-color);
}

/***** POPUP STYLE *****/
.award {
    height: 1.3em;
    width: 1.3em;
}

.item-preview {
    max-width: 250px;
}

.item-status::first-letter {
    text-transform: uppercase;
}

/***** POPUP LOGIC *****/
:host(:not([current])) .current-message {
    display: none;
}

:host([current]) .item-link,
[slot=popup].blocked .item-link {
    display: none;
}

.item-preview[src=""],
:host([current]) .item-preview{
    display: none;
}

[slot=popup]:not(.blocked) .block-message {
    display: none;
}