dashboard-widget-openweathermap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: @space/2;
    container-type: size;
    container-name: openweathermapwidget;

    @minBlockHeight: 6 * (@font-size * @line-height-base);
    @maxBlockHeight: 5 * @space/2 + @minBlockHeight;

    .weather-data {
        flex-grow: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 100%;
        gap: @space * 2;
        overflow: hidden;

        .current-weather-container {
            flex-grow: 1;
            width: 100%;
            height: 100%;

            .current-weather {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                gap: @space/2 0;
                text-align: center;
                container-type: size;
                container-name: current-weather;

                .weather-icon {
                    width: ~"clamp(32px, min(60cqb, 25cqi), 300px)";
                    height: ~"clamp(32px, min(60cqb, 25cqi), 300px)";
                }

                .temperature {
                    font-size: ~"clamp("@font-size-h3 ~", min(50cqb, 18cqi), 200px)";
                    font-weight: bold;

                    span {
                        white-space: nowrap;
                    }
                }

                .description {
                    color: var(--dashboard-widget-mutedcolor);
                    font-size: ~"clamp("@font-size ~", min(10cqb, 7cqi), 48px)";
                }
            }
        }

        .additional-info-container {
            display: none;
            width: 100%;
            height: 100%;
            max-height: @maxBlockHeight;
            container-type: inline-size;
            container-name: additional-info;

            .additional-info {
                align-self: center;
                display: grid;
                grid-template-columns: repeat(6, max-content max-content);
                align-items: center;
                justify-content: center;
                height: 100%;

                label {
                    color: var(--dashboard-widget-mutedcolor);
                    padding-left: @space;
                    padding-right: @space/2;
                    white-space: nowrap;
                }

                div {
                    padding-right: @space;
                    padding-left: @space/2;
                    white-space: nowrap;
                }
            }
        }

        .forecasts-container {
            display: none;
            width: 100%;

            .forecasts {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: @space * 2;
                container-type: inline-size;
                container-name: forecasts;

                .forecast {
                    min-width: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;

                    .weather-icon {
                        width: ~"clamp(32px, 10cqb, 64px)";
                        height: ~"clamp(32px, 10cqb, 64px)";
                    }

                    .date {
                        font-size: ~"clamp("@font-size ~", 4cqb, 20px)";
                        font-weight: bold;
                        color: var(--dashboard-widget-mutedcolor);
                        width: 100%;
                    }

                    .temperature {
                        font-size: ~"clamp("@font-size ~", 4cqb, 20px)";
                        font-weight: bold;
                        color: var(--dashboard-widget-mutedcolor);
                        width: 100%;
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                    }

                }
            }
        }
    }

    @container openweathermapwidget (width >=400px) and (height >=@minBlockHeight) {
        .weather-data {
            .additional-info-container {
                display: block;
                height: auto;
            }
        }
    }

    @container additional-info (width < 1200px) {
        .weather-data {
            .additional-info-container {
                .additional-info {
                    grid-template-columns: repeat(3, max-content max-content);
                }
            }
        }
    }

    @container additional-info (width < 600px) {
        .weather-data {
            .additional-info-container {
                .additional-info {
                    grid-template-columns: repeat(2, max-content max-content);
                }
            }
        }
    }

    @container additional-info (width < 400px) {
        .weather-data {
            .additional-info-container {
                .additional-info {
                    grid-template-columns: repeat(1, max-content max-content);
                }
            }
        }
    }

    @container openweathermapwidget (width >=500px) and (height >=@minBlockHeight) {
        .weather-data {
            .forecasts-container {
                display: block;
            }
        }
    }

    @container openweathermapwidget (height >=300px) {
        .weather-data {
            flex-direction: column;

            .forecasts-container {
                display: block;
            }
        }
    }

    @container forecasts (width < 150px) {
        .forecast:nth-child(2) {
            display: none !important;
        }
    }

    @container forecasts (width < 225px) {
        .forecast:nth-child(3) {
            display: none !important;
        }
    }

    @container forecasts (width < 300px) {
        .forecast:nth-child(4) {
            display: none !important;
        }
    }

    @container forecasts (width < 375px) {
        .forecast:nth-child(5) {
            display: none !important;
        }
    }

    @container forecasts (width < 450px) {
        .forecast:nth-child(6) {
            display: none !important;
        }
    }

    @container forecasts (width < 525px) {
        .forecast:nth-child(7) {
            display: none !important;
        }
    }
}