@use '../variables' as v;

window.Overlay {

    .weather-card {
        padding: 16px;
        border-radius: 16px;
        background-color: v.$bg-base;
    }

    .weather-current-row {
        padding: 10px 0;
    }

    .weather-current-icon {
        font-size: 48px;
    }

    .weather-current-temp {
        font-family: v.$font-sans;
        font-size: 42px;
        font-weight: bold;
        color: v.$text-primary;
        color: v.$accent-primary-light;
    }

    .weather-current-wind {
        font-size: 13px;
        font-weight: 500;
        color: v.$text-muted;
        font-family: v.$font-sans;
    }

    .weather-today-row {
        padding: 10px 0;
    }

    .weather-today-icon {
        font-size: 30px;
    }

    .weather-today-highlow {
        font-size: 15px;
        font-weight: bold;
        color: v.$text-primary;
        font-family: v.$font-sans;
    }

    .weather-rain-pill {
        font-size: 12px;
        color: v.$accent-primary-light;
        font-family: v.$font-monospace;
        font-weight: 600;
        // Pill background
        border-radius: 999px;
        background-color: rgba(v.$accent-primary, 0.15);
        padding: 2px;
        margin-top: 2px;
    }

    .weather-forecast-title {
        font-family: v.$font-sans;
        font-size: 10px;
        font-weight: bold;
        letter-spacing: 2px;
        color: v.$text-muted;
        margin-bottom: 6px;
    }

    .weather-forecast-box {
        margin-top: 2px;
    }

    .weather-forecast-day {
        padding: 6px 4px;
        border-radius: 8px;

        &:hover {
            background-color: v.$bg-surface-hover;
            transition: v.$transition-fast;
        }
    }

    .weather-forecast-label {
        font-size: 12px;
        font-weight: bold;
        color: v.$text-muted;
        font-family: v.$font-sans;
    }

    .weather-forecast-icon {
        font-size: 22px;
    }

    .weather-forecast-temps {
        font-size: 12px;
        color: v.$text-primary;
        font-family: v.$font-monospace;
        font-weight: 500;
    }

    .weather-forecast-rain {
        font-size: 11px;
        font-weight: 500;
        color: v.$accent-primary-light;
        font-family: v.$font-monospace;
        margin-top: 2px;
    }

    .weather-rain-bar-bg {
        border-radius: 999px;
        background-color: rgba(v.$accent-primary, 0.15);
        min-width: 60px;
        margin: 2px 6px 0;
    }

    .weather-rain-bar-fg {
        border-radius: 999px;
        background: v.$accent-gradient;
        min-height: 4px;
    }
}