.player-current-weather {
    position: absolute;
    z-index: 4;
    bottom: max(5px, var(--player-safe-bottom));
    right: max(8px, var(--player-safe-right));
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - max(16px, var(--player-safe-left)) - max(16px, var(--player-safe-right)));
    padding: 0 clamp(2px, 0.5cqi, 6px);
    color: #fff;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    opacity: 1;
    visibility: visible;
}

.player-current-weather__metric {
    display: none;
    align-items: center;
    gap: clamp(4px, 0.7cqi, 7px);
    min-width: 0;
    min-height: clamp(24px, 3.5cqi, 32px);
    padding: 0 clamp(5px, 1cqi, 10px);
    border-left: 1px solid rgba(255, 255, 255, 0.32);
    white-space: nowrap;
}

.player-current-weather__metric svg {
    flex: 0 0 clamp(15px, 2.2cqi, 21px);
    width: clamp(15px, 2.2cqi, 21px);
    height: clamp(15px, 2.2cqi, 21px);
    fill: currentColor;
    color: rgba(255, 255, 255, 0.82);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

.player-current-weather__metric--temperature {
    display: inline-flex;
    padding-left: clamp(3px, 0.6cqi, 6px);
    border-left: 0;
}

.player-current-weather__value {
    overflow: hidden;
    color: #fff;
    font-size: clamp(13px, 2cqi, 19px);
    font-weight: 700;
    letter-spacing: -0.015em;
    text-overflow: ellipsis;
}

.player-current-weather__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.dark .player-current-weather {
    color: #fff;
}

body.dark .player-current-weather__value {
    color: #fff;
}

body.dark .player-current-weather__metric svg {
    color: rgba(255, 255, 255, 0.94);
}

@container (min-width: 280px) {
    .player-current-weather__metric--wind {
        display: inline-flex;
    }
}

@container (min-width: 320px) {
    .player-current-weather__metric--humidity {
        display: inline-flex;
    }
}

@container (max-width: 519px) {
    .player-current-weather {
        right: max(8px, var(--player-safe-right));
        left: auto;
    }
}

@container (min-width: 520px) {
    .player-current-weather__metric--pressure {
        display: inline-flex;
    }
}

@container (min-width: 700px) {
    .player-current-weather {
        right: 6px;
        bottom: 6px;
    }
}