:root {
    --icon--From: "https://pictogrammers.com/library/mdi/";
    --icon--License: "Apache License 2.0 https://pictogrammers.com/docs/general/license/";
    --icon--colorconverter: "https://isotropic.co/tool/hex-color-to-css-filter/";
    
    /* https://pictogrammers.com/library/mdi/icon/white-balance-sunny/ */
    --icon-sunny: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>white-balance-sunny</title><path fill="black" d="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13" /></svg>');

    /* https://pictogrammers.com/library/mdi/icon/cloud-outline */
    --icon-cloud-outline: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>cloud-outline</title><path fill="black" d="M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20M6.5 18H18.5Q19.55 18 20.27 17.27 21 16.55 21 15.5 21 14.45 20.27 13.73 19.55 13 18.5 13H17V11Q17 8.93 15.54 7.46 14.08 6 12 6 9.93 6 8.46 7.46 7 8.93 7 11H6.5Q5.05 11 4.03 12.03 3 13.05 3 14.5 3 15.95 4.03 17 5.05 18 6.5 18M12 12Z" /></svg>');
    
     /* https://pictogrammers.com/library/mdi/icon/cloud */
    --icon-cloud: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>cloud</title>        <path fill="black" d="M6.5 20Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20Z" /></svg>');
    
    /* https://pictogrammers.com/library/mdi/icon/weather-pouring/ */
    --icon-rain: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>weather-pouring</title><path fill="black" d="M9,12C9.53,12.14 9.85,12.69 9.71,13.22L8.41,18.05C8.27,18.59 7.72,18.9 7.19,18.76C6.65,18.62 6.34,18.07 6.5,17.54L7.78,12.71C7.92,12.17 8.47,11.86 9,12M13,12C13.53,12.14 13.85,12.69 13.71,13.22L11.64,20.95C11.5,21.5 10.95,21.8 10.41,21.66C9.88,21.5 9.56,20.97 9.7,20.43L11.78,12.71C11.92,12.17 12.47,11.86 13,12M17,12C17.53,12.14 17.85,12.69 17.71,13.22L16.41,18.05C16.27,18.59 15.72,18.9 15.19,18.76C14.65,18.62 14.34,18.07 14.5,17.54L15.78,12.71C15.92,12.17 16.47,11.86 17,12M17,10V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11C3,12.11 3.6,13.08 4.5,13.6V13.59C5,13.87 5.14,14.5 4.87,14.96C4.59,15.43 4,15.6 3.5,15.32V15.33C2,14.47 1,12.85 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12C23,13.5 22.2,14.77 21,15.46V15.46C20.5,15.73 19.91,15.57 19.63,15.09C19.36,14.61 19.5,14 20,13.72V13.73C20.6,13.39 21,12.74 21,12A2,2 0 0,0 19,10H17Z" /></svg>');

    /* https://pictogrammers.com/library/mdi/icon/weather-snowy-heavy/ */
    --icon-snow: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>weather-snowy-heavy</title><path fill="black" d="M4,16.36C3.86,15.82 4.18,15.25 4.73,15.11L7,14.5L5.33,12.86C4.93,12.46 4.93,11.81 5.33,11.4C5.73,11 6.4,11 6.79,11.4L8.45,13.05L9.04,10.8C9.18,10.24 9.75,9.92 10.29,10.07C10.85,10.21 11.17,10.78 11,11.33L10.42,13.58L12.67,13C13.22,12.83 13.79,13.15 13.93,13.71C14.08,14.25 13.76,14.82 13.2,14.96L10.95,15.55L12.6,17.21C13,17.6 13,18.27 12.6,18.67C12.2,19.07 11.54,19.07 11.15,18.67L9.5,17L8.89,19.27C8.75,19.83 8.18,20.14 7.64,20C7.08,19.86 6.77,19.29 6.91,18.74L7.5,16.5L5.26,17.09C4.71,17.23 4.14,16.92 4,16.36M1,10A5,5 0 0,1 6,5C7,2.65 9.3,1 12,1C15.43,1 18.24,3.66 18.5,7.03L19,7A4,4 0 0,1 23,11A4,4 0 0,1 19,15A1,1 0 0,1 18,14A1,1 0 0,1 19,13A2,2 0 0,0 21,11A2,2 0 0,0 19,9H17V8A5,5 0 0,0 12,3C9.5,3 7.45,4.82 7.06,7.19C6.73,7.07 6.37,7 6,7A3,3 0 0,0 3,10C3,10.85 3.35,11.61 3.91,12.16C4.27,12.55 4.26,13.16 3.88,13.54C3.5,13.93 2.85,13.93 2.47,13.54C1.56,12.63 1,11.38 1,10M14.03,20.43C14.13,20.82 14.5,21.04 14.91,20.94L16.5,20.5L16.06,22.09C15.96,22.5 16.18,22.87 16.57,22.97C16.95,23.08 17.35,22.85 17.45,22.46L17.86,20.89L19.03,22.05C19.3,22.33 19.77,22.33 20.05,22.05C20.33,21.77 20.33,21.3 20.05,21.03L18.89,19.86L20.46,19.45C20.85,19.35 21.08,18.95 20.97,18.57C20.87,18.18 20.5,17.96 20.09,18.06L18.5,18.5L18.94,16.91C19.04,16.5 18.82,16.13 18.43,16.03C18.05,15.92 17.65,16.15 17.55,16.54L17.14,18.11L15.97,16.95C15.7,16.67 15.23,16.67 14.95,16.95C14.67,17.24 14.67,17.7 14.95,17.97L16.11,19.14L14.54,19.55C14.15,19.65 13.92,20.05 14.03,20.43Z" /></svg>');
    
    /* https://pictogrammers.com/library/mdi/icon/weather-lightning/ */
    --icon-thunder: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6,16A5,5 0 0,1 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12A4,4 0 0,1 19,16H18A1,1 0 0,1 17,15A1,1 0 0,1 18,14H19A2,2 0 0,0 21,12A2,2 0 0,0 19,10H17V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11A3,3 0 0,0 6,14H7A1,1 0 0,1 8,15A1,1 0 0,1 7,16H6M12,11H15L13,15H15L11.25,22L12,17H9.5L12,11Z" /></svg>');

    /* https://pictogrammers.com/library/mdi/icon/weather-lightning-rainy/ */
    --icon-thunder-rain: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5,13.59C5,13.87 5.14,14.5 4.87,14.96C4.59,15.44 4,15.6 3.5,15.33V15.33C2,14.47 1,12.85 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12A4,4 0 0,1 19,16A1,1 0 0,1 18,15A1,1 0 0,1 19,14A2,2 0 0,0 21,12A2,2 0 0,0 19,10H17V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11C3,12.11 3.6,13.08 4.5,13.6V13.59M9.5,11H12.5L10.5,15H12.5L8.75,22L9.5,17H7L9.5,11M17.5,18.67C17.5,19.96 16.5,21 15.25,21C14,21 13,19.96 13,18.67C13,17.12 15.25,14.5 15.25,14.5C15.25,14.5 17.5,17.12 17.5,18.67Z" /></svg>');
}

/* #region */
.weatherbuttons , dialog.weather .dialogContent{
    display: grid;
    gap: 3px;
    background-color: color-mix(in srgb, Canvas,lightyellow);
}

.weatherbuttons>button {
    display: inline-block;

    border: 1px solid black;
    border-radius: 3pt;
    /* background-color: #B1ECEC3f; */
    background-color: ButtonFace;
    color: ButtonText;
    cursor: pointer;

    &:hover {
        background-color: #B1ECEC;
    }
}
@media (prefers-color-scheme: dark) {
    .weatherbuttons>button{
        filter: invert(0);
    }
}

.weather {
    
    /* &.addtip::after {
        display: block;
        font-size: 0.7em;
        content: attr(data-weather);
    } */
    

    &.icon {
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-size: 10px 10px;
        min-height: 2.5em;
        min-width: 2.5em;

        container-type: size;
        display: flex;

        align-items: center;
        justify-content: center;

        &:before
        {     
            width: 2em;
            height: 2em;
            content: '';
            position: absolute;
        }
        
        &[data-weather='晴れ'] {
            grid-row: 1;
            grid-column: 1;
            &::before{
                background:  var(--icon-sunny) no-repeat;
                filter: invert(23%) sepia(94%) saturate(7403%) hue-rotate(358deg) brightness(104%) contrast(112%);
            }
        }

        &[data-weather='薄曇'] {
            grid-row: 1;
            grid-column: 2;    

            &::before{
                background:  var(--icon-cloud-outline);
                filter: invert(70%)
            }
        }

        &[data-weather='曇り'] {
            grid-row: 1;
            grid-column: 3;

            &::before{
                background:  var(--icon-cloud);
                filter: invert(70%)
            } 
        }

        &[data-weather='曇天'] {
            grid-row: 1;
            grid-column: 4;

            &::before{
                background:  var(--icon-cloud);
                filter: invert(30%)
            } 
        }

        &[data-weather='小雨'] {
            grid-row: 2;
            grid-column: 2;

            color: black;
            &::before{
                background:  var(--icon-rain);
                filter: invert(61%) sepia(41%) saturate(727%) hue-rotate(186deg) brightness(102%) contrast(102%);
                opacity: 0.7;
            }
        }

        &[data-weather='雨'] {
            grid-row: 2;
            grid-column: 3;

            color: black;
            &::before{
                background:  var(--icon-rain);
                filter: invert(51%) sepia(88%) saturate(3986%) hue-rotate(222deg) brightness(101%) contrast(101%);
                opacity: 0.7;
            }

        }

        &[data-weather='大雨'] {
            grid-row: 2;
            grid-column: 4;

            color: black;
            &::before{
                background:  var(--icon-rain);
            }
        }

        &[data-weather='小雪'] {
            grid-row: 3;
            grid-column: 2;

            &::before{
                background:  var(--icon-snow);
                filter: invert(72%) sepia(96%) saturate(4869%) hue-rotate(89deg) brightness(122%) contrast(123%);
                opacity: 0.7;
            }
        }

        &[data-weather='雪'] {
            grid-row: 3;
            grid-column: 3;

            &::before{
                background:  var(--icon-snow);
               
                filter: invert(26%) sepia(93%) saturate(1663%) hue-rotate(102deg) brightness(92%) contrast(104%);

            }
        }

        &[data-weather='大雪'] {
            grid-row: 3;
            grid-column: 4;

            &::before{
                background:  var(--icon-snow);
                /* filter: invert(26%) sepia(93%) saturate(1663%) hue-rotate(102deg) brightness(92%) contrast(104%); */
            }
        }

        &[data-weather='雷'] {
            grid-row: 5;
            grid-column: 2;

            &::before{
                background:  var(--icon-tunder);
                /* filter: invert(26%) sepia(93%) saturate(1663%) hue-rotate(102deg) brightness(92%) contrast(104%); */
            }
        }
        &[data-weather='雷雨'] {
            grid-row: 5;
            grid-column: 3;

            &::before{
                background:  var(--icon-tunder-rain);
                /* filter: invert(26%) sepia(93%) saturate(1663%) hue-rotate(102deg) brightness(92%) contrast(104%); */
            }
        }

        &[data-weather='のち'] {
            grid-row: 1;
            grid-column: 5;
        }

        &[data-weather='一時'] {
            grid-row: 2;
            grid-column: 5;
        }

        &[data-weather='時々'] {
            grid-row: 3;
            grid-column: 5;
        }

/* 
        &[data-weather=''] {
            vertical-align: top;
        } */

        /* &[data-dialogvalue='ok'] {
            display: none;
        }

        &[data-dialogvalue='clear'] {
            display: none;
        } */
    }

}

.weatherInput {
    display: flex;

    /* box-sizing: content-box; */
    border: 1px solid black;
    background-color: white;


    & input {
        /* all: initial; */
        border: 0;
        width: 100%;
    }

    .dialogButton {
        border: none;
        background: ButtonFace;
        margin: 0;
        padding: 0;
        /* margin-left: auto; */

        min-width: 2em;

        visibility: hidden;
        border-radius: 0px;
        
        &::before {
            content: "☀";
            color: red;
        }
    }
    &:has(input:not(:read-only)) .dialogButton {
        visibility: visible;
    }
    
    &:has(input:read-only){
        border: 1px solid transparent;
    }

}

/* @media (height < 25em) {
    .weatherbuttons{
        background-color: red;
    }
} */