.time-control-icon-wrapper {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    position: relative;
}

.time-control-icon-wrapper[data-time-control-tooltip]::after {
    content: attr(data-time-control-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.35rem;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    font-weight: normal;
    font-family: inherit;
    white-space: nowrap;
    background: #212529;
    color: #fff;
    border-radius: 0.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1000;
}

.time-control-icon-wrapper[data-time-control-tooltip]:hover::after {
    opacity: 1;
}

.time-control-icon {
    width: 1.5em;
    height: 1.5em;
    object-fit: contain;
    filter: brightness(0);
}

.time-control-icon--blitz .time-control-icon {
    width: 1.25em;
    height: 1.25em;
}