/**
Created by saimoom **/
*{
    all: unset;
    font-family: feather;
    font-family: VictorMono Nerd Font;
}

$background: rgba(00, 00, 00, 0.7);
$widget-background: rgba(30, 30, 30, 0.4);
$shadow:    #0B0B0B;
$grey:      #606060;

$black:     #282A36;
$red:       #F37F97;
$green:     #5ADECD;
$orange:    #F2A272;
$blue:      #8897F4;
$purple:    #C574DD;
$teal:      #79E6F3;
$white:     #FDFDFD;

$base00: #282a36;
$base01: #34353e;
$base02: #43454f;
$base03: #78787e;
$base04: #a5a5a9;
$base05: #e2e4e5;
$base06: #eff0eb;
$base07: #f1f1f0;
$base08: #ff5c57;
$base09: #ff9f43;
$base0A: #f3f99d;
$base0B: #5af78e;
$base0C: #9aedfe;
$base0D: #57c7ff;
$base0E: #ff6ac1;
$base0F: #b2643c;
$basetransparent: rgba(40, 42, 54, 0.0);
$backtransparent: rgba(40, 42, 54, 0.7);
$darktransparent: rgba(40, 42, 54, 0.97);

/** General **/
.bar_class {
    background-color: $backtransparent;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 5px 5px 4px 4px #202020;
    margin: 6px 18px 13px 18px;
}
.module {
    margin: 0px 0px 0px 0px;
    border-radius: 10px 10px 0px 10px;
}

.side{
    background-color: $base00;
    border-width: 0px;
    padding: 30px 30px 0px 30px;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 2px 2px 5px 5px #101010;
    margin: 8px 18px 13px 18px;
}

.center_modules {
    margin: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
}

/** tooltip!! **/
tooltip.background {
    background-color: $backtransparent;
    font-size: 18;
    border-radius: 10px;
    color: $white;
}

tooltip label {
    margin: 6px;
}


/** Widgets **/

.clock_time_class, .clock_minute_class {
    font-size: 14;
}
.clock_date_class {
    font-size: 14;
    margin: 0px 20px 0px -1px;
    color: $base08;
}
.clock_time_class {
    color: $base0B;
    font-weight: bold;
    margin: 0px 0px 0px 0px;
}

.notif_button {
    font-size: 14;
    margin: 2px 20px 0px 0px;
    color: $base05;
}

.nc_button {
    font-size: 14;
    margin: 2px 20px 0px 0px;
    color: $base05;
}

.nc_button:hover {
    font-size: 14;
    margin: 2px 20px 0px 0px;
    background-color: $base0D;
}

.sysmodules {
    // padding-bottom: 2px;
    padding-right: 5px;
}

.separ {
    font-size: 5;
    padding-bottom: 0px;
    padding-top: 1px;
}

.membar {
    color: $base0A;
    background-color: $base01;
    border-radius: 5px;
}
.batbar {
    color: $base0E;
    background-color: $widget-background;
    border-radius: 5px;
}
.cpubar {
    color: $base0D;
    background-color: $widget-background;
    border-radius: 5px;
}
.brightbar trough highlight {
    background-color: $base09;
    border-radius: 10px;
}
.brightbar {
    color: $base09;
    background-color: $widget-background;
    border-radius: 5px;
}

.bright_label {
    color: $base09;
    padding-top: 3px;
}

.bright_icon {
    font-size: 18;
    color: $base09;
    margin: 0px 15px 0px 3px;
}

.volbar trough highlight {
    background-color: $base08;
    border-radius: 10px;
}

.volbar {
    color: $base08;
    background-color: $widget-background;
    border-radius: 5px;
}

.volume_icon {
    font-size: 14;
    color: $base08;
    margin: 0px 15px 0px 3px;
}

.module_essid {
    font-size: 14px;
    // color: $base0C;
    margin: 0px 10px 0px 0px;
}
.module-wifi {
    font-size: 14px;
    // color: $base0C;
    margin: 0px 25px 0px 0px;
}

.tray {
    margin: 0px 13px 0px 0px;
}

// ALL RIGHT MODULES

.vol_module, .bright_module {
    // background-color: rgba(00, 00, 00, 0.0);
    // margin: 0px 3px 0px 5px;
}

// Icon Size
.iconbat, .iconmem, .iconcpu .iconvol .iconbright {
    // font-size: 12;
    // padding-top: 2px;
    // padding-left: 8px;
}

// Memory

.mem_module {
    // background-color: rgba(00, 00, 00, 0.0);
    // border-radius: 16px;
    // margin: 0px 5px 0px 0px;
}

.iconmem {
    color: $base0A;
    padding-top: 2px;
    padding-left: 8px;
    // padding-right: 8px;
}
.mem_label {
    color: $base0A;
    padding-top: 3px;
}

// Battery

.bat_module {
    background-color: rgba(00, 00, 00, 0.0);
    border-radius: 16px;
    // margin: 0px 0px 0px 5px;
}

button:hover {
    background-color: rgba(00, 00, 00, 0.2);
    border-radius: 16px;
}

.iconbat {
    color: $base0E;
    // margin: 2px 10px 0px 8px;
    padding-top: 3px;
    padding-left: 10px;
    padding-right: 8px;
}

.bat_label {
    color: $base0E;
    padding-top: 3px;
    padding-right: 20px;
    // padding-left: 3px;
}

// Cpu

.iconcpu {
    color: $base0D;
    // margin: 2px 10px 0px 8px;
    padding-top: 3px;
    padding-left: 10px;
    padding-right: 8px;
    // padding-right: 12px;
}

.cpu_label {
    color: $base0D;
    padding-top: 3px;
}

.icongpu {
    color: $base0E;
    // margin: 2px 10px 0px 8px;
    padding-top: 3px;
    padding-left: 10px;
    padding-right: 8px;
    // padding-right: 12px;
}

.gpu_label {
    color: $base0E;
    padding-top: 3px;
}

// Volume
.iconvol {
    color: $base08;
    // margin: 2px 10px 0px 8px;
    padding-top: 3px;
    padding-left: 10px;
    padding-right: 8px;
    // padding-right: 4px;
}

.vol_label {
    color: $base08;
    padding-top: 3px;
}

//Brightness
.iconbright {
    color: $base09;
    padding-top: 3px;
    padding-left: 10px;
    padding-right: 8px;
    // padding-right: 8px;
}
.bright_icon {
    font-size: 18;
    color: $base09;
    margin: 0px 15px 0px 3px;
}

//Disk
.disk_label {
    color: $base09;
    padding-top: 3px;
    padding-left: 0px;
}

.icondisk {
    // font-size: 18;
    color: $base09;
    // margin: 3px 5px 0px 3px;
    padding-top: 3px;
    padding-left: 5px;
    padding-right: 3px;
}

.separ {
    color: $base03;
    font-weight: bold;
    font-size: 14px;
    margin: 0px 8px 0px 8px;
}

.right_sep {
    color: $base03;
    font-weight: bold;
    font-size: 14px;
    // margin-left: -10px;
    margin-right: 8px;
}

.left_sep {
    color: $base03;
    font-weight: bold;
    font-size: 14px;
    margin-right: 3px;
}

.works {
    font-size: 15px;
    font-weight: normal;
    margin: 0px 0px 0px 0px;
    background-color: rgba(00, 00, 00, 0.0);
    padding-left: 5px;
    padding-right: 9px;
}

.worksbox {
    font-size: 14px;
    padding-left: 15px;
    padding-right: 10px;
    background-color: rgba(00, 00, 00, 0.0);
}

.works:hover {
    color: $base0E;
}

.empty_workspace {
    color: $base03;
}

.occupied_workspace {
    color: $base05;
}

.current_workspace {
    color: $base0D;
}

.busy_workspace {
}

// .0, .01, .02, .03, .04, .05, .06,
// .011, .022, .033, .044, .055, .066 {
//     margin: 0px 15px 0px 0px;
// }

// .04 {
//     margin: 0px 2px 0px 0px;
// }

// /* Unoccupied */
// .0 {
//     color: $base03;
// }

// /* Occupied */
// .01, .02, .03, .04, .05, .06, .07, .08, .09 {
//     color: $base05;
// }

// /* Focused */
// .011, .022, .033, .044, .055, .066, .077, .088, .099{
//     color: $base0D;
// }


// Calendar
.cal {
    background-color: $backtransparent;
    font-family: mononoki Nerd Font;
    font-size: 18px;
    font-weight: normal;
    border-radius: 25px;

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

        .cal {
            &.highlight {
                padding: 20px;
            }
            padding: 10px 10px 10px 10px;
            margin-left: 10px;
        }
    }
}

calender {
    color: $blue;
}
calendar:selected {
    color: $blue;
}

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

calendar.button {
    color: $green;
}

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

calendar:indeterminate {
    color: $black;
}



.sys_sep {
    color: $widget-background;
    font-size: 14;
    margin: 0px 10px 0px 10px;
}
.sys_text_bat_sub, .sys_text_mem_sub {
    font-size: 16;
    color: $white;
    margin: 5px 0px 0px 25px;
}
.sys_text_bat, .sys_text_mem {
    font-size: 21;
    font-weight: bold;
    margin: 14px 0px 0px 25px;
}
.sys_icon_bat, .sys_icon_mem {
    font-size: 30;
    margin: 30px;
}
.sys_win {
    background-color: $background;
    border-radius: 25px;
}
.sys_bat {
    color: $green;
    background-color: $widget-background;
    border-radius: 10px;
}
.sys_mem {
    color: $orange;
    background-color: $widget-background;
    border-radius: 10px;
}
.sys_icon_bat, .sys_text_bat {
    color: $green;
}
.sys_icon_mem, .sys_text_mem {
    color: $orange;
}
.sys_bat_box {
    border-radius: 16px;
    margin: 15px 10px 10px 20px;
}
.sys_mem_box {
    border-radius: 16px;
    margin: 10px 10px 15px 20px;
}


.app-name {
    color: $base0D;
    font-size : 14px;
    font-weight : bold;
    margin : 3px 5px 0px 0px;
}

.app-icon {
    margin : 5px 10px 0px 0px;

}

.app-button {
    color: $base0D;
    font-size : 20px;
    font-weight : bold;
    margin : 0px 15px 0px 15px;
}

.launcher-icon {
    margin : 9px 0px 10px 15px;
}

.audio-box {
    background-color: $background;
    border-radius: 16px;
}
.speaker_icon {
    background-size: cover;
    background-image: url('images/speaker.png');
    background-position: center;
    min-height: 70px;
    min-width: 75px;
    margin: 10px 20px 5px 20px;
    border-radius: 12px;
}

.speaker_text {
    color: $base0D;
    font-size : 26px;
    font-weight : bold;
    margin: 20px 0px 0px 0px;
}

.speaker_bar scale trough highlight {
    all: unset;
    background-image: linear-gradient(to right, #afcee0 30%, #92B6F4 50%, #77a5bf 100% *50);
    border-radius: 24px;
}
.speaker_bar scale trough {
    all: unset;
    background-color: $widget-background;
    box-shadow: 0 6px 5px 2px $shadow;
    border-radius: 24px;
    min-height: 13px;
    min-width: 120px;
    margin : 0px 0px 5px 0px;
}




.mic_icon {
    background-size: cover;
    background-image: url('images/mic.png');
    background-position: center;
    min-height: 70px;
    min-width: 75px;
    margin: 5px 20px 20px 20px;
    border-radius: 12px;
}

.mic_text {
    color: $blue;
    font-size : 26px;
    font-weight : bold;
    margin: 0px 0px 0px 0px;
}

.mic_bar scale trough highlight {
    all: unset;
    background-image: linear-gradient(to right, #afcee0 30%, #92B6F4 50%, #77a5bf 100% *50);
    border-radius: 24px;
}
.mic_bar scale trough {
    all: unset;
    box-shadow: 0 6px 5px 2px $shadow;
    background-color: $widget-background;
    border-radius: 24px;
    min-height: 13px;
    min-width: 120px;
    margin : 0px 0px 20px 0px;
}

.audio_sep {
    color: $black;
    font-size: 18;
    margin : 0px 0px 0px 0px;
}

// Music
.music-player {
    all: unset;
    background-color: $widget-background;
    padding: 0px 25px 0px 17px;
    border-radius: 12px;
    box-shadow: 0px 0px 6px 6px $shadow;}

.album_art {
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    margin: 2rem 1rem 1.5rem 1rem;
    padding: 4rem;}

.song {
    font-family: JetBrainsMono Nerd Font Mono;
    font-weight: bold;
    color: $white;
    font-size : 1.2em;
}
.artist {
    font-family: JetBrainsMono Nerd Font;
    font-style: italic;
    font-size: 1.1em;
    color: $blue;
    margin-top: -5px;
}
.btn_prev, .btn_play, .btn_next {
    font-family: JetBrainsMono Nerd Font Mono;
    color: $purple;
    font-size: 25px;
}

.metric-player  scale trough highlight {
    all: unset;
    border-radius: 10px;
    background-color: $blue;
}

// weather
.weather {
    all: unset;
    background-color: $widget-background;
    border-radius: 12px;
    padding: 23px 37px 20px 37px;
    box-shadow: 0px 0px 6px 6px rgb(0, 0, 0, .4);}

.iconweather {
    font-family: JetBrainsMono Nerd Font;
    font-size : 44px;
    font-weight : normal;
    margin : 0px -5px  0px 20px;
}

.label_temp {
    color : $base0D;
    font-size : 35px;
    font-weight : bold;
    margin : 0px 0px 0px 0px;
    font-family: Furamono Nerd Font;

}

.label_stat {
    color : $base0D;
    font-size : 38px;
    font-weight : bold;
}

.label_quote {
    color : $base0D;
    font-size : 18px;
    padding-bottom: 10px;
    font-weight : normal;
}

.date {
    all: unset;
    background-color: $widget-background;
    padding: 33px 27px 27px 27px;
    border-radius: 12px;
    color: $base0D;
    font-size : 12px;
    font-style : italic;
    font-family: Cartograph CF;
    box-shadow: 0px 0px 6px 6px rgb(0, 0, 0, .4);}

.stats-box {
    all: unset;
    background-color: $widget-background;
    padding: 20px 25px 20px 25px;
    border-radius: 12px;
    box-shadow: 0px 0px 6px 6px rgb(0, 0, 0, .4);}

.stats-icon {
    font-size: 23px;
    color: $base0D;
    font-family: JetBrainsMono Nerd Font Mono;
}


scale trough {
    all: unset;
    background-color: $widget-background;
    box-shadow: 0 2px 3px 2px $shadow;
    border-radius: 16px;
    min-height: 10px;
    min-width: 70px;
    margin: 0px 5px 0px 10px;
}

.scale highlight {
    background-image: linear-gradient(to right, #afcee0 30%, #92B6F4 50%, #77a5bf 100% *50);
    border-radius: 15px;
}

.foo {
    font-size: 40px;
    padding-top: 10px;
}

.buttons {
    opacity: 1;
    background-color: $widget-background;
    border-radius: 12px;
    padding: 15px 0px 15px 0px;
    font-family: JetBrainsMono Nerd Font Mono;
    margin-bottom: 30px;
    box-shadow: 0px 0px 6px 6px rgb(0, 0, 0, .4);}

.poweroff, .reboot, .firmware, .exit, .restart {
    margin: 0px 16px 0px 16px;
    padding: 2px 15px 2px 9px;
    font-family: mononoki Nerd Font;
    border-radius: 25px;
    font-size: 24px;
    color: $black;
}

.poweroff {
    background-color: $red;
}
.reboot {
    background-color: $green;
}
.firmware {
    background-color: $orange;
}
.exit {
    background-color: $purple;
}
.restart {
    background-color: $blue;
}

.fetch {
    margin-top: 35px;
    font-size: 15px;
    border-radius: 12px;
    background-color: $widget-background;
    padding: 30px 55px 30px 55px;
    box-shadow: 0px 0px 6px 6px rgb(0, 0, 0, .4);}

.wm {
    font-family: "JetBrainsMono Nerd Font";
    font-weight: bold;
    color: $red;
}

.host {
    font-family: "JetBrainsMono Nerd Font";
    font-weight: bold;
    color: $purple;
}

.uptime {
    font-family: "JetBrainsMono Nerd Font";
    font-weight: bold;
    color: $orange;
}

.packages {
    font-family: "JetBrainsMono Nerd Font";
    font-weight: bold;
    color: $blue;
}

.kernal {
    font-family: "JetBrainsMono Nerd Font";
    font-weight: bold;
    color: $green;
}

.notification {
    all: unset;
    background-color: $base00;
    padding: 10px 15px 10px 7px;
    margin: 0px 15px 0px 15px;
    border-radius: 12px;
    border-width: 2px;
    border-style: solid;
    border-color: $base09;}

.notification-header {
    all: unset;
    background-color: $base00;
    padding: 10px 15px 10px 7px;
    margin: 20px 15px 10px 15px;
    border-radius: 12px;
    border-width: 2px;
    border-style: solid;
    border-color: $base0A;}

.notification-icon {
    color: $white;
    font-size: 16px;
    margin: 0px 10px 0px 0px;
}

.notification-appname {
    font-size: 14px;
    font-weight: bold;
    color: $orange;
}

.notification-summary {
    font-size: 18px;
    font-weight: bold;
    color: $white;
}

.notification-body {
    font-size: 14px;
    color: $white;
}

.notification-label {
    font-size: 30px;
    color: $blue;
    margin: 0px 50px 0px 0px;
}
.notification-action {
    font-size: 36px;
    color: $white;
    margin: 0px 0px 0px 20px;
}
.battery-container {
    background-color: $darktransparent;
    border-radius: 16px;
}
.battery-icon {
    margin: 10px;
    margin-left: 20px;
    font-size: 28px;
}
.battery-value trough highlight {
    background-color: $base08;
    border-radius: 10px;
}
.battery-value {
    margin-bottom: 30px;
    margin-right: 20px;
}
.battery-label {
    margin: 20px 50px 10px 40px;
}

.close-icon {
    margin-left: -10px;
    margin-right: 10px;
    margin-bottom: 50px;
    font-size: 28px;
}

.close-icon:hover {
    color: $base08;
}

.volume-container {
    background-color: $darktransparent;
    border-radius: 16px;
    box-shadow: 2px 2px 3px 3px #101010;
    margin: 8px 18px 13px 18px;
}

.volume-value trough highlight {
    background-color: $base0B;
    border-radius: 10px;
}

.volume-value {
    margin-bottom: 0px;
    margin-right: 0px;
    min-width: 250px;
}

.volume-label {
    margin: 10px 20px 10px 5px;
}
.volume-icon {
    font-size: 18;
    color: $base0B;
    margin: 0px 5px 0px 20px;
}