$base: #44465c;
$blue: #3fc6de;
$surface0: #44465c;
$surface1: #44465c;
$text: #d9e0ee;
$overlay0: #6e738d;
$red: #ec6a88;
$peach: #efb993;
$yellow: #efb993;
$mauve: #b072d1;
$green: #3fdaa4;
$mantle: #292a37;
$crust: #2e303e;
$light-gray: #9699b7;

* {
    all: unset; //Unsets everything so you can style everything from scratch
    font-family: "JetBrainsMono"
}

.icon {
    font-family: monospace;
    font-size: 1.4rem;
}

button {
    transition: background-color 200ms, color 200ms;
}

.active {
    color: $green;
    font-size: 1.4rem;
}

.inactive {
    color: $base;
    font-size: 1.4rem;
}

.inactive:hover {
    color: $light-gray;
}

.bar {
    background-color: $mantle;
    border-left: 4px dotted $red;
}

.wifi {
    font-size: 2rem;
    color: $blue;
}

.clock {
    font-weight: bold;
    background-color: $base;
    color: $text;
    border-radius: 10px;
    padding: 0.2rem;
    margin: 0.5rem;
}


.date {
    font-size: 1.5rem;
}

.reg-btn {
    font-size: 2rem;
    margin: 2px 8px;
    border-radius: 10px;
}

.powerbutton {
    color: $red;
}

.powerbutton:hover {
    background-color: $base;
}

.powerbutton:active {
    background-color: $red;
    color: $mantle;
}

.battery {
    font-size: 1.5rem;
    color: $green;
}

.volume {
    font-size: 1.5rem;
    color: $blue;
}

// Credits AlphaTechnolog
.powermenu-box {
    padding: 0 2px;
    margin: 7px 7px 7px 0px;
    background: inherit;

    .dispatcher {
        border-radius: 15px;
        background: $base;
        color: $red;
        font-size: 14px;
        padding: 0 14px 0 10px;

        &:hover {
            background-color: $surface0;
        }

        &:active {
            background-color: $surface1;
        }
    }
}

// powermenu
.powermenu-container {
    background: $crust;
    color: $text;
    padding: 10px;
    font-size: 55px;
    border-radius: 5px;

    transition: all 200ms cubic-bezier(.1, -0.00, .0, 1.49);

    .btn {
        margin: 1rem;
    }

    // shutdown
    .shutdown-btn-box .btn {
        color: $red;
        border-radius: 15px;
        background-color: $mantle;

        &:hover {
            background-color: $base;
        }

        &:active {
            background-color: $surface1;
        }
    }

    // reboot
    .reboot-btn-box .btn {
        color: $mauve;
        border-radius: 15px;
        background-color: $mantle;

        &:hover {
            background-color: $base;
        }

        &:active {
            background-color: $surface1;
        }
    }

    // exit
    .exit-btn-box .btn {
        color: $yellow;
        border-radius: 15px;
        background-color: $mantle;

        &:hover {
            background-color: $base;
        }

        &:active {
            background-color: $surface1;
        }
    }
}

// battery menu
.batterywindow {
    background-color: $mantle;
    border-radius: 5px;
    font-size: 18px;
    font-weight: normal;
    color: $text;

    progressbar {
        border-radius: 5px;
    }

    progressbar progress {
        background-color: $green;
    }

    progressbar trough {
        background-color: $base;
    }

    .batterymenu {
        padding: 10px;
    }

}

// Calendar
.cal {
    background-color: $mantle;
    border-radius: 5px;
    font-size: 18px;
    font-weight: normal;

    .cal-in {
        padding: 0px 10px 0px 10px;
        color: $text;

        .cal {
            &.highlight {
                padding: 20px;
            }

            padding: 5px 5px 5px 5px;
            margin-left: 10px;
        }
    }
}

calender {
    color: $text;
}

calendar:selected {
    color: $mauve;
}

calendar.header {
    color: $overlay0;
    font-weight: bold;
}

calendar.button {
    color: $base;
}

calendar.highlight {
    color: $overlay0;
    font-weight: bold;
}

calendar:indeterminate {
    color: $text;
}