.view-timeline-profiles {
    position: relative;
    border-bottom: 1px solid #0004;
    margin: 1px 0;
}

.view-timeline-profiles .toggle-disabled-button {
    position: absolute;
    left: -21px;
    width: 20px;
    height: 8px;
    box-sizing: border-box;
    padding: 0;
    margin: .5px 0;
    font-size: 1px;
}
.view-timeline-profiles .toggle-disabled-button:has(+ .profile.disabled):not(:hover) {
    opacity: .5;
}

.view-timeline-profiles > .profile {
    position: relative;
    margin-left: calc(100% * var(--x1));
    width: calc(100% * (var(--x2) - var(--x1)));
    height: 8px;
    background-color: #54a6eea6;
    border: .5px solid black;
}

.view-timeline-profiles > .profile > .profiles-presence {
    --border-width: .5px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% * var(--x1));
    right: calc(100% * (1 - var(--x2)));
    border-left: var(--border-width) solid color-mix(in srgb, var(--discovery-background-color) 50%, transparent);
    background-color: rgb(0, 0, 0, calc(.1 + .4 * (1 - var(--presence))));
}
.view-timeline-profiles > .profile > .profiles-presence:first-child {
    display: none;
}
.view-timeline-profiles > .profile > .profiles-presence:last-child {
    --color: #9b6262;
    background-image: linear-gradient(to right, var(--color), var(--color));
    background-size: 16px;
}

.view-timeline-profiles > .profile.selected {
    background-color: orange;
}
.view-timeline-profiles > .profile.disabled {
    background-color: #888;
    opacity: .25;
}
.view-timeline-profiles > .profile.disabled > .profiles-presence {
    display: none;
}
.view-timeline-profiles .toggle-disabled-button:hover + .profile:not(.selected),
.view-timeline-profiles > .profile:not(.selected, .disabled):hover {
    background-color: #6d9ec9;
    cursor: pointer;
}
