@mixin calendar {
    @include widget;
    padding: $padding*2 $padding*2 0;

    calendar{
        // all: unset;
        .view {
            all:unset;
        }

        &.button{
            @include button($flat: true);
        }

        &:selected{
            box-shadow: inset 0 -8px 0 0 transparentize($accent, 0.5),
            inset 0 0 0 1px $accent;
            border-radius: $radii*0.6;
        }

        &.header{
            background-color: transparent;
            border: none;
            color: transparentize($fg-color, 0.5);
        }

        &.highlight{
            background-color: transparent;
            color: transparentize($accent, 0.5);
        }

        &:indeterminate {
            color: transparentize($fg-color, 0.9);
        }
        font-size: 1.1em;
        padding: .2em;
        color: $fg_color;
    }
}

window#notification .dashboard,
window#weather .weather,
window#dashboard .window-content {
    @include floating-widget;

    .notifications {
        min-width: $notifications-width;

        .header {
            margin-bottom: $spacing;
            margin-right: $spacing;

            > label { margin-left: $radii / 2; }

            button {
                @include button;
                padding: $padding/2 $padding;
            }
        }

        .notification-scrollable {
            @include scrollable;
        }

        .notification-list {
            //fixes weird spacing bug on notification panel - release4
            // margin-right: $spacing;
        }

        .notification {
            @include notification;

            > box {
                @include widget;
                padding: $padding;
                margin-bottom: $spacing;
            }
        }

        .placeholder {
            image {  font-size: 7em; }
            label {  font-size: 1.2em; }
        }
    }

    separator {
        background-color: $popover-border-color;
        min-width: 2px;
        border-radius: $radii;
        margin-right: $spacing;
    }

    .datemenu, .system-info {
        @include spacing;
    }

    .clock-box {
        padding: $padding;

        .clock {
            font-size: 5em;
        }

        .uptime {
            color: transparentize($fg-color, 0.2);
        }
    }

    .calendar {
        @include calendar;
    }

    //weather popup
    .weather-info {
        .weather-icon{
            font-size: 1.5em;
            margin-top: 0.3em;
            margin-bottom: 0.15em;
        }

        .weather-temperature {
            all: unset;
            font-size: 1.2em;
            margin-left: 0.5em;
        }
    }
}

// height of the notification popup
window#notification .dashboard {
    min-height: 32em;
}

// weather popup
.weather-refresh {
    all: unset;
    border: none;
    margin: 0;
    padding: 0;
}

.weather-refresh:hover {
    color: gray;
}

.weather-refresh:active {
    color: black;
}

.weather-refresh:focus {
    color: $accent;
}

.weather-info {
    background-color: rgba(81, 164, 231, 0.76);
    border-radius: 16px;
    padding: 0.55em;
    // margin: 0 5px;

    min-width: 5em;
    min-height: 10em;
}

.weather-temperature {
    margin-bottom: 0.6em;
}

.weather-day {
    padding: 2px;
}

.weather-day:first-child {
    padding: 0;
}

window#dashboard .dashboard,
window#quicksettings .window-content {
    .circular-progress-box {
        @include widget;
        padding: $padding;

        .circular-progress {
            min-height: $sys-info-size;
            min-width: $sys-info-size;
            margin: $padding/2;
            font-size: $padding;
            background-color: $bg-color;
            color: $accent;

            image {
                font-size: 1.8em;
            }
        }
    }
}

// weather window width of the weather widget
window#weather .weather .tooltip {
    .weather-spacing {
        padding-left: $spacing;
    }

    .qsweather-widget {
        margin: 0;
    }

    .qs-weather-box-child {
        min-width: 5em;

        .weather-icon {
            font-size: 1.5em;
        }
    }

    .qs-weather-box-main {
        min-width: 16.5em;
    }
}

// shared logic for weather widget, first one only goes to qs
window#quicksettings .window-content,
window#weather .tooltip {
    .qsweather-widget {
        margin: 0;
        padding: 0;
        margin-top: $padding / 2;
        border-radius: $radii;
    }

    .qs-weather-box-main {
        margin: 0.5em;

        .weather-icon {
            font-size: 2.42em;
            margin-left: 0.5em;
        }

        .weather-temperature {
            all: unset;
            font-size: 1.6em;
        }

        .weather-rain {
            margin-left: 1.2em;
        }

        .weather-hour {
            margin-right: 1em;
        }
    }

    .qs-weather-box-child {
        padding-bottom: 0.7em;

        .weather-icon {
            margin-top: 0.3em;
            font-size: 24px;
        }

        .weather-temperature {
            all: unset;
            margin-bottom: 0.2em;
            font-size: 20px;
        }
    }

    // .weather-max {
    //     color: #FF8C00;
    // }

    // .weather-min {
    //     color: #87ceeb;
    // }
}

// fix to keep topbar on the correct height - 29 (hyprctl layers), new on release4
.weather.panel-button label{
    font-size: 16px;
}

$sliderVolumeMinHeight: 2em;
$sliderTroughMinWidth: 2em;

window#dashboard .datemenu .sub-menu {
    all:unset;

    &:focus,
    &:hover{
        color: $accent;
    }
}

.led-light-color-switcher {
    .on,
    .off {
        min-width: 1.8em;
        min-height: 3.8em;
        background-color: #fff;
        border: 1px solid black;
        border-radius: 5px;
        color: black;
        margin-top: 0.5em;

        &:focus,
        &:hover{
            box-shadow: inset 0 0 4px 2px $accent,
            inset 0 0 0 99px $widget_bg;
        }
    }

    .on {
        box-shadow: inset 0px -20px 2px 2px rgba(0, 0, 0, 0.2);
        margin-right: 0.5em;
    }

    .off {
        box-shadow: inset 0px 20px 2px 2px rgba(0, 0, 0, 0.2);
    }

    .slider {
        min-width: 21.3em;
        margin: 0 0.5em;
        padding: 0;
        margin-top: 1em;

        slider {
            all: unset;
        }

        trough{
            min-height: $sliderVolumeMinHeight;
            border-radius: $radii;
        }

        highlight,
        progress {
            background: transparent;
            border-radius: $radii;
            min-width: $sliderTroughMinWidth;
        }
    }

    .color-temp.slider,
    .hue.slider,
    .brightness.slider {
        highlight,
        progress {
            &:focus,
            &:hover{
                box-shadow: inset 0 0 3px 3px $accent,
                    inset 0 0 0 99px $widget_bg;

                border: $accent;
            }
        }
    }

    .color-temp.slider {
        trough{
            box-shadow:
                inset 700px 0 10px rgba(98, 159, 255, 0.8),  /* 6500K */
                inset 600px 0 10px rgba(144, 196, 255, 0.8), /* 6000K */
                inset 500px 0 10px rgba(200, 232, 255, 0.8), /* 5000K */
                inset 400px 0 10px rgba(255, 255, 255, 0.8), /* 4000K */
                inset 300px 0 10px rgba(255, 249, 200, 0.8), /* 3000K */
                inset 200px 0 10px rgba(255, 232, 156, 0.8), /* 2000K */
                inset 100px 0 10px rgba(255, 184, 104, 0.8),  /* 1700K */
            ;
        }

        highlight,
        progress {
            box-shadow: inset 0px 0px 2px 1px black;
        }
    }

    .hue.slider {
        trough{
            box-shadow:
                inset 350px 0 10px rgba(255, 0, 0, 0.8),   /* Red */
                inset 300px 0 10px rgba(255, 0, 255, 0.8), /* Magenta */
                inset 250px 0 10px rgba(0, 0, 255, 0.8),   /* Blue */
                inset 200px 0 10px rgba(0, 255, 255, 0.8), /* Cyan */
                inset 150px 0 10px rgba(0, 255, 0, 0.8),   /* Green */
                inset 100px 0 10px rgba(255, 255, 0, 0.8),  /* Yellow */
                inset 50px 0 10px rgba(255, 0, 0, 0.8),     /* Red */
            ;
        }

        highlight,
        progress {
            box-shadow: inset 0px 0px 2px 1px black;
        }
    }

    .brightness.slider {
        trough{
            box-shadow:
                inset 500px 0 10px rgba(255, 255, 255, 0.5),
                inset 450px 0 10px rgba(220, 220, 220, 0.5),
                inset 400px 0 10px rgba(190, 190, 190, 0.5),
                inset 350px 0 10px rgba(160, 160, 160, 0.5),
                inset 300px 0 10px rgba(130, 130, 130, 0.5),
                inset 250px 0 10px rgba(100, 100, 100, 0.5),
                inset 200px 0 10px rgba(70, 70, 70, 0.5),
                inset 150px 0 10px rgba(40, 40, 40, 0.5),
                inset 100px 0 10px rgba(10, 10, 10, 0.5),
                inset 50px 0 10px rgba(0, 0, 0, 0.5)
            ;

            highlight,
            progress {
                box-shadow: inset 0px 0px 2px 1px white;
            }
        }
    }
}