@import "../colors";

window#powermenu,
window#verification {
    // the fraction has to be more than hyprland ignorealpha
    background-color: rgba(0, 0, 0, .4);
}

$popover-padding: 7px * 1.6;
$padding: 7px;
$spacing: 12px;
$radius: 11px;

window#verification .verification {
    @include floating-widget;
    padding: 7px * 1.6 * 1.5;
    min-width: 300px;
    min-height: 80px;
    font-size: 1.3em;

    .text-box {
        margin-bottom: $spacing;

        .title {
            font-size: 1.6em;
        }

        .desc {
            color: transparentize($primary_fg, 0.1);
            font-size: 1.1em;
        }
    }

    .verification-button {
        background: $crust;
        padding: 10px 0px;
        margin: 5px 25px;
        border: 2px solid;
        border-color: $crust;
        border-radius: $radius;
        opacity: 1;
        transition: border-color 0.2s ease-in-out;
        transition: opacity .3s ease-in-out;

        &:hover {
            &.bar-verification_yes{
                border-color: $green;
                transition: border-color 0.2s ease-in-out;
            }
            &.bar-verification_no {
                border-color: $red;
                transition: border-color 0.2s ease-in-out;
            }
        }
        &:focus {
            &.bar-verification_yes{
                border-color: $green;
                transition: border-color 0.2s ease-in-out;
            }
            &.bar-verification_no {
                border-color: $red;
                transition: border-color 0.2s ease-in-out;
            }
        }

        &:active {
            &.bar-verification_yes {
                border-color: rgba($green, 0.4);
                transition: border-color 0.2s ease-in-out;
            }
            &.bar-verification_no {
                border-color: rgba($red, 0.4);
                transition: border-color 0.2s ease-in-out;
            }

            image {
                opacity: .3;
                transition: opacity .3s ease-in-out;
            }
            label {
                opacity: .3;
                transition: opacity .3s ease-in-out;
            }
        }
    }
    .bar-verification_no label {
        color: $red;
    }
    .bar-verification_yes label {
        color: $green;
    }
}

window#powermenu .powermenu {
    @include floating-widget;
    &.line {
        padding: $popover-padding * 1.5;
    }

    &.box {
        padding: $popover-padding * 2;
    }
}

.widget-button {
    &:hover {
        &.powermenu-button-shutdown {
            border-color: $red;
        }
        &.powermenu-button-logout {
            border-color: $green;
        }
        &.powermenu-button-sleep {
            border-color: $sky;
        }
        &.powermenu-button-reboot {
            border-color: $peach;
        }
    }

    &:focus,
    &:active {
        &.powermenu-button-shutdown {
            border-color: rgba($red, .5);
        }
        &.powermenu-button-logout {
            border-color: rgba($green, .5);
        }
        &.powermenu-button-sleep {
            border-color: rgba($sky, .5);
        }
        &.powermenu-button-reboot {
            border-color: rgba($peach, .5);
        }
    }
}
.system-button_icon {
    &.shutdown {
        color: $red;
    }
    &.logout {
        color: $green;
    }
    &.reboot {
        color: $peach;
    }
    &.sleep {
        color: $sky;
    }
}

.system-button_label {
    &.shutdown {
        color: $red;
    }
    &.logout {
        color: $green;
    }
    &.reboot {
        color: $peach;
    }
    &.sleep {
        color: $sky;
    }
}