@use '../colors' as *;

window.battery_info {
    font-weight: bold;

    >box {
        border: 1px solid $color0;
        border-radius: 10px;
        margin: 8px;
    }
    
    >.inner {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        background: $color5;
        padding: 0.75rem 3rem;
        margin: 0;

        label.percentage {
            font-size: 300%;
        }

        * { 
            transition: all 0.2s ease-in-out;
            color: $color0;
        }
    }

    button {
        padding: 0.75rem 1rem;
    }
}

window.battery_info button {
    transition: all 0.2s ease-in-out;
    background: $color5;
    border: 2px solid $color0;
    margin: 5px;

    &:hover {
        background: $color0;

        * {
            color: $color5;
        }
    }

    &.active {
        background: $color0;
        border: 0.5px solid $color5;

        * {
            color: $color5;
        }
    }
}