
// Common
////////////////////////////////////////////////////////////////////////////
*{
    //all: unset;
    color: $fg;
    //padding: 0px;
    //margin: 0px;
    //background-color: unset;
    button {
        //all: unset;
    }
}


.large-text {
    font-size: 1.24em;
    font-weight: bold;
    font-family: "JetBrains Mono Nerd Font";
}

.sub-text {
    font-size: 0.72rem;
    color: $fgDim;
    font-family: "JetBrains Mono Nerd Font";
}

.recording > *{
    color: red;
}

.container{
    border-radius: 1rem;
    background-color: rgba($bg1, $lowOpacity);
    padding: 0.6em;
}

.container-no-spacing{
    border-radius: 1rem;
    background-color: rgba($bg1, $lowOpacity);
}

.container-side-spacing{
    border-radius: 1rem;
    padding-left: 0.6em;
    padding-right: 0.6em;
    background-color: rgba($bg1, $lowOpacity);
}

.scrollable-item:first-child{
    margin-top: 0.8em;
}
.scrollable-item:last-child{
    margin-top: 0.8em;
}

.toggle-window{
    background-color: rgba($bg0, $mediumOpacity);
    border-radius: 1rem;
    border-color: rgba(64, 64, 64, 0.42);
    border-width: 1px;
    border-style: solid;
    padding: 0.64rem;
    margin: 1rem;
}

.normal-window{
    background-color: rgba($bg0, 0.8);
}

.round-left{
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem; 
    margin-left: 0.2rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

.round-right{
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    margin-right: 0.2rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

tooltip{
    padding: 1.2rem;
    border-radius: 1rem;
    background-color: rgba($bg0, $lowOpacity);
}

.horizontal-separator{
    min-height: 1px;
    background-color: $fg; 
    border-radius: 1rem;
    margin-left: 0.6rem;
    margin-right: 0.6rem;
}

.vertical-separator{
    min-width: 1px;
    background-color: $fg; 
    border-radius: 1rem;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

/*
window:has(menu){

}
*/

.dim{
    color: rgb(108, 108, 108);
}

.invisible{
    opacity: 0;
}

switch{
    //min-height: 0.6rem;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 1rem;
    background-color: $bg1;
}

switch slider {
    border-radius: 1rem;
    min-width: 2rem;
    min-height: 2rem;
    background-color: $accent1;
}


.padder {
    margin: 0.8rem;
}

spinbutton{
    &, * {
        all: unset;
    }
    min-height: 38px;

    entry{
        border-radius: 1rem;
        padding: 0.6rem;
        margin: 0.2rem;
        background-color: $bg0;
    }

    button {
        border-radius: 100%;
        margin-left: 2px;
        font-size: 8px;
        min-width: 38px;
        min-height: 38px;
        background-color: rgba($bg2, 0.3);
    }

    button:hover{
        background-color: $bg0;
    }
}

switch {
    background-color: rgba($bg2, 0.3);
}

.active-button > * {
    background-color: $accent3;
    border-radius: 1rem;
}


// Shadow Button
.shadow-button {
    margin-bottom: 0.6rem;
    background-color: transparent;
    padding: 0.28rem; // Currently determines bar height
}

.shadow-button:active {
}

.shadow-button > * {
    padding: 0.4rem 0.8rem;
    border-radius: 0.8rem;
    background-color: rgba($bg2, 0.3);
    box-shadow: 4px 4px 2px rgba($bg0, 0.8), -3px -3px 2px rgba($bg2, 0.5);
    border: solid;
    border-width: 0px;
    border-color: $bg2;
}

.shadow-button:hover > * {
    background-color: rgba($bg0, 0.2);
    box-shadow: -4px -4px 2px rgba($bg0, 0.8), 3px 3px 2px rgba($bg2, 0.5);
}



entry {
    padding: 0.6rem;
    background-color: rgba($bg1, $lowOpacity);
    border-radius: 1rem;

}
// Doesn't work
/*
entry window.popup {
    background-color: $bg1;
}
*/


// Bar
////////////////////////////////////////////////////////////////////////////
.bar-window{
    background-color: rgba($bg0, $mediumOpacity);
    font-family: "System-ui";
    font-size: 16px;
}

.bar-icon{
    background-color: red;
    padding: 0.3rem; // Currently determines bar height
}


// App Launcher
////////////////////////////////////////////////////////////////////////////
.applauncher {
    background-color: rgba($bg0, $mediumOpacity);
    padding: 8px;
    border-radius: 1.2rem;
    border-color: rgba(88, 88, 88, 0.42);
    border-width: 1px;
    border-style: solid;
}


// App launcher button
.app-button {
    all: unset;
    padding: 0.4rem;
    border-radius: 1rem;
    margin-right: 0.8rem;
}
.app-button:hover {
    background-color: $accent1;
    label {
        color: $bg0; 
    }
}
.app-button:focus {
    background-color: $accent1;
    label {
        color: $bg0; 
    }
}


// Search entry
.app-entry {
    all: unset;
    padding: 0.6rem;
    background-color: rgba($bg1, $lowOpacity);
    border-radius: 1rem;
}

// First item in list of applications
.first-item > button:first-child{
    //background-color: rgba($outline_variant, 1);
    background-color: $accent1;
    border-radius: 1rem;
    label {
        color: $bg0; 
    }
}


// Buttons
////////////////////////////////////////////////////////////////////////////

// Normal Button
.normal-button {
    all: unset;
    //background-color: transparent;
    padding: 0.28rem; // Currently determines bar height
}

.normal-button:active {
}

.normal-button > * {
    padding: 0.4rem 0.8rem;
    border-radius: 0.8rem;
}

.normal-button:hover > * {
    color: $fgAlt;
    * {
        color: $fgAlt;
    }
    background-color: $accent2;
}

.bg-button > * {
    background-color: rgba($bg2, 0.3);
}

// Power Button

.power-button > * {
    padding: 0.4rem;
    border-radius: 1rem;
}

.power-button:hover > * {
    background-color: $bg3;
}


// Dock
////////////////////////////////////////////////////////////////////////////
.dock-button > box {
    padding: 0.6rem 0.6rem;
    margin: 0.4rem;
    border-radius: 1rem;
    min-width: 4rem;
    min-height: 4rem;
}
.dock-button:hover > box {
    background-color: $bg3;
}
.dock-container{
    background-color: rgba($bg0, $mediumOpacity);
    //border-radius: 32px;
}
.dock-app-indicator{
    min-width: 0.4rem;
    min-height: 0.4rem;
    border-radius: 1rem;
    margin-right: 0.6rem;
    background-color: rgba(0,0,0,0);
}
.dock-app-indicator-active{
    background-color: $fg;
}





// Notifications
////////////////////////////////////////////////////////////////////////////
.notifications {
  margin: 1rem;
}

.notification {
    color: rgb(255, 255, 255);
   background-color: rgba($bg0, $mediumOpacity);
    border-radius: 20px;
    min-width: 16rem;
    min-height: 4rem;
    padding: 1rem;
}




// Battery
////////////////////////////////////////////////////////////////////////////
.battery-bg{
    color: #ffffff;
}

.battery-fg{
    color: rgb(68, 236, 68);
}

.battery-circle{
    min-width: 7.2rem;
    min-height: 7.2rem;
    background-color: $bg0;
    color: $accent2;
}

// Glyph Icons
////////////////////////////////////////////////////////////////////////////
.icon{
    font-size: 20px;
    font-family: "JetBrains Mono Nerd Font";
    //color: rgb(83, 18, 18);
    color: $fg;
}


// System stats
////////////////////////////////////////////////////////////////////////////

.system-stats-circular-progress{
    background-color: $bg0;
    color: $accent3;
    font-size: 4px;
    min-height: 22px;
}


// Lockscreen
////////////////////////////////////////////////////////////////////////////
.lockscreen {
    background-color: $bg1;
}

@import 'calendar';



// Systray + other context menus?
////////////////////////////////////////////////////////////////////////////
menu {
    border-color: rgba(64, 64, 64, 0.42);
    border-width: 1px;
    border-style: solid;
    background-color: rgba($bg0, $mediumOpacity);
    border-radius: 1rem;
    padding: 0.4rem;
}

menuitem {
    border-radius: 1rem;
    padding: 0.4rem;
    margin: 0.2rem;
}

menuitem:hover{
    background-color: $bg3;
}


// Scrollbars
////////////////////////////////////////////////////////////////////////////
scrollbar {
    min-width: 4px;
    margin: 0px;
}

scrollbar.overlay-indicator{
    background-color: black;
    border-radius: 1rem;
}

scrollbar.vertical {
    margin-top: 0.6em;
    margin-bottom: 0.6em;
    slider{
        min-width: 4px;
        border-radius: 1rem;
        background-color: $bg3;
    }
}

scrollbar.horizontal {
    margin-left: 0.6em;
    margin-right: 0.6em;
    slider{
        min-height: 4px;
        border-radius: 1rem;
        background-color: $bg3;
    }
}

// Combobox
////////////////////////////////////////////////////////////////////////////

button.combo {
    background-color: $bg0;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
}

button.combo:hover {
    background-color: $bg3;
}


// Systray
.systray{
    background-color: $bg0;
    margin: 0.2rem;
    border-radius: 1rem;
}

.weather-container{
    border-radius: 1rem;
    padding: 1rem;
    background-color: rgba($bg1, 0.90);
}

entry treeview {
    background-color: $bg1;
}

// Progress bar
progressbar {
    trough {
        background-color: $bg0;
        border-radius: 1rem;
        min-width: 1rem;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        progress {
            background-color: $accent3;
            min-width: 1rem;
            border-radius: 1rem;
        }
    }
}

