@use "../colors";

// Power Options
.powermenu {
    background: colors.$surface_container;
    border: 1px solid rgba(colors.$outline_variant, 0.5);
    padding: 4px;
    border-radius: 25px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);

    button {
        background-color: colors.$surface_container;
        color: colors.$on_background;
        margin: 2.5px;
        border-radius: 20px;

        .power-menu-icon {
            font-family: "Material Symbols Outlined", "Material Icons Outlined";
            font-size: 48pt;
        }

        .power-menu-label {
            font-size: 12pt;
            font-weight: 500;
            color: colors.$on_surface_variant;
        }

        &:hover {
            background-color: colors.$surface_container_high;
        }

        &:focus {
            background-color: colors.$primary_container;
            color: colors.$on_primary_container;
            font-variation-settings: "FILL" 1;
            outline: none;

            .power-menu-label {
                color: colors.$on_primary_container;
            }
        }
    }
}
