@import "./colors.css";

window.bar {
    background-color: @surface;
    padding: 6px;
}

.bar label {
    font-weight: bold;
}

button {
    background: transparent;
}

trough {
}

/* slider {
    background-color: @primary;
    background-image: -gtk-scaled(url("sun-alt-svgrepo-com.png"));
    background-size: 100px 100px;
    color: @primary;
    min-height: 10px;
    min-width: 10px;
    border-radius: 100px;
} */


highlight {
    border-radius: 100px;
}

* {
    border: none;
    outline: none;
    transition: 0.2s ease-in-out;
    transition-property: border-color, background-color, color;
    font-family: "Product Sans", Roboto, "Font Awesome 6 Free", Roboto, Helvetica, Arial, sans-serif;
}

.corner {
    background-color: @background;
    border-radius: 2px;
}

tooltip {
    background-color: @surfaceContainer;
    border-radius: 11px;
    outline: none;
    border: none;
    box-shadow: none;
}

tooltip label {
    color: @onSurface;
    outline: none;
    border: none;
    box-shadow: none;
    font-weight: normal;
}

menu separator {
    color: @outline;
}

separator {
    color: @outline;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0px;
}

/* -----------------------------------------------------
 * Modules
 * ----------------------------------------------------- */

.modules-left,
.modules-center,
.modules-right {
    /* background-color: @surface; */
    /* border-radius: 25px 25px 25px 25px; */
    padding: 6px;
    /* border: solid 2px; */
    /* color: @outlineVariant; */
}

/* -----------------------------------------------------
 * Workspaces
 * ----------------------------------------------------- */

.workspaces {
    border-radius: 16px;
    font-weight: bold;
    font-style: normal;
    font-size: 16px;
    color: @onSurface;
    background: @surfaceContainer;
}

.workspaces * {
    transition: all 0.35s ease-in-out;
    transition-property: background-color, color, min-width;
}

.workspaces button {
    padding: 0px 5px;
    margin: 4px 3px;
    border-radius: 16px;
    border: 0px;
    color: @onSurface;
}

.workspaces button.active {
    color: @onSecondaryContainer;
    background: @secondaryContainer;
    border-radius: 16px;
    min-width: 40px;
}

.workspaces button:hover {
    color: @onSurface;
    background: @surfaceContainerHighest;
    border-radius: 16px;
}

.workspaces button.active:hover {
    color: @onPrimaryContainer;
    background: @primaryContainer;
    border-radius: 16px;
}

/* -----------------------------------------------------
 * Clock
 * ----------------------------------------------------- */

.clock {
    background-color: @surfaceContainer;
    border-radius: 16px;
    padding: 2px 10px 0px 10px;
}

.time {
    color: @onSurface;
    font-size: 14px;
}

.date {
    color: @onSurface;
    font-size: 10px;
}

/* -----------------------------------------------------
 * Tray
 * ----------------------------------------------------- */


.tray {
    background-color: @surfaceContainer;
    border-radius: 16px;
    padding: 2px 10px 0px 10px;
}

.tray button {
    margin: 0px;
    padding: 0px;
}

.tray image {
    color: @onSurface;
}

/* -----------------------------------------------------
 * Notifications
 * ----------------------------------------------------- */

window.notification-popups box.notifications {
    padding: 14px;
}


.notification-icon {
    min-width: 68px;
    min-height: 68px;
    margin-right: 1em;
}

.notification-icon image {
    font-size: 58px;
    /* to center the icon */
    margin: 5px;
    color: @onSurface;
}

.notification-icon box {
    min-width: 68px;
    min-height: 68px;
    border-radius: 7px;
}

.notification {
    min-width: 350px;
    border-radius: 24px;
    padding: 1em;
    margin: 1px;
    background-color: @surfaceContainerLowest;
}

.notification.critical {
    border: 2px solid @error;
}

.notification-title {
    color: @foreground;
    font-size: 1.4em;
}

.notification-body {
    color: @foreground;
}

.notification-actions .notification-action-button {
    margin: 0 .4em;
    margin-top: .8em;
}

.notification-action-button {
    background-color: @primary;
    color: @onPrimary;
}

.notification-actions .notification-action-button:first-child {
    margin-left: 0;
}

.notification-actions .notification-action-button:last-child {
    margin-right: 0;
}

.notification-time {
    color: @primary;
}

/* -----------------------------------------------------
 * Applications
 * ----------------------------------------------------- */

.applauncher_box {
    border-radius: 24px;
    background-color: @background;
    border: 2px solid;
    border-color: @outlineVariant;
}

.applauncher_box {
    padding: 11px;
}

.applauncher_entry {
    background-color: @surfaceContainerHigh;
    border: none;
    outline: none;
    border-radius: 100px;
    margin-bottom: 16px;
    padding: 5px;
    font-weight: normal;
    padding-left: 25px;
}

.application_container label {
    color: @onSurface;
    font-weight: normal;
}

.application_container {
    border-radius: 100px;
    border: none;
    outline: none;
}

.application_container:hover {
    background-color: @surfaceContainerHighest;
}

.application_container:focus label {
    color: @onPrimary;
}

.application_container:focus {
    background-color: @primary;
    border: 0px solid;
    border-radius: 34px;
    border: none;
    outline: none;
}

.application_divider {
    color: @outline;
    margin: 5px 0px 5px 0px;
}

.application_label {
    color: @onSurface
}

.application_icon {
    margin-right: 16px;
    color: @onSurface;
}

/* -----------------------------------------------------
 * Clipboard history
 * ----------------------------------------------------- */

 .cliphistory_box {
    border-radius: 24px;
    background-color: @background;
    border: 2px solid;
    border-color: @outlineVariant;
}

.cliphistory_box {
    padding: 11px;
}

.cliphistory_entry {
    background-color: @surfaceContainerHigh;
    color: @onSurface;
    border: none;
    outline: none;
    border-radius: 100px;
    margin-bottom: 16px;
    padding: 5px;
    padding-left: 25px;
}

.entry_container {
    border-radius: 100px;
    border: none;
    outline: none;
    min-height: 30px;
}

.entry_container:hover {
    background-color: @surfaceContainerHighest;
}

.entry_container:focus .entry_label {
    color: @onPrimary;
}

.entry_container:focus {
    background-color: @primary;
    border: 0px solid;
    border-radius: 34px;
    border: none;
    outline: none;
}

.entry_divider {
    color: @outline;
    margin: 5px 0px 5px 0px;
}

.entry_label {
    color: @onSurface;
    font-weight: normal;
}

/* -----------------------------------------------------
 * Media player
 * ----------------------------------------------------- */

.player {
    background-color: @background;
    padding: 15px;
    min-width: 350px;
    border: 2px solid @outlineVariant;
    border-radius: 24px;
}

.player .img {
    min-width: 100px;
    min-height: 100px;
    background-size: cover;
    background-position: center;
    border-radius: 13px;
    color: @foreground;
}

.player .title {
    font-size: 1.2em;
    margin-left: 10px;
    color: @foreground;
}

.player .artist {
    font-size: 1.1em;
    margin-left: 10px;
    color: @foreground;
}

.player .length {
    color: @foreground;
}

.player .position {
    color: @foreground;
    margin-left: 10px;
}

.player .icon {
    color: @foreground
}

.player scale.position {
    padding: 0;
    margin-bottom: .3em;
    margin-left: 10px;
}

.player scale.position trough {
    background-color: @secondaryContainer;
    min-height: 8px;
}

.player scale.position highlight {
    background-color: @primary;
}

.player scale.position slider {
    all: unset;
}

.player button {
    min-height: 1em;
    min-width: 1em;
    padding: .3em;
    color: @onSecondary;
}

.player button image {
    color: @onSecondary;
}

.player_buttons {
    background-color: @secondary;
    border-radius: 100px;
    padding: 3px;
    margin-top: 2px;
}

/* -----------------------------------------------------
 * Misc
 * ----------------------------------------------------- */

.bold_label {
    font-weight: bold;
}

.keyboard {
    background-color: @surfaceContainer;
    color: @onSurface;
    padding: 0px 10px 0px 10px;
    border-radius: 100px;
}

.volume_box image {
    margin-right: 5px;
}

.awesome_icon {
    font-family: "Font Awesome 6 Free";
}

.battery {
    background-color: @surfaceContainer;
    border-radius: 100px;
    padding: 2px 10px 2px 10px;
}

.battery label {
    color: @onSurface;
}

.battery image {
    color: @onSurface;
}

.bar_wifi {
    background-color: @surfaceContainer;
    border-radius: 100px;
    padding: 2px 10px 2px 10px;
}

.bar_wifi image {
    color: @onSurface;
}

/* -----------------------------------------------------
 * Sidebar
 * ----------------------------------------------------- */

.sidebar_main_box {
    background: @surfaceContainerLowest;
}

.sidebar_main_box .empty {
    color: @onSurface;
}

.management_box {
    padding: 15px;
    padding-bottom: 0px;
    outline: none;
    border: none;
}

.management_button {
    min-width: 170px;
    min-height: 50px;
}

.management_button {
    border-radius: 25px;
    background: @surfaceContainer;
    border: none;
    outline: none;
}

.management_button label {
    color: @onSurface;
    font-weight: normal;
}

.ssid {
    font-size: 12px;
}

.management_button .icon {
    color: @onSurface
}

.management_button:hover {
    background-color: @surfaceContainerHigh;
}

.management_button.active label {
    color: @onPrimary
}

.management_button.active .icon {
    color: @onPrimary
}

.management_button.active {
    background-color: @primary;
    border: 0px solid;
}

.management_button.waiting label {
    color: @onError
}

.management_button.waiting .icon {
    color: @onError
}

.management_button.waiting {
    background-color: @error;
    border: 0px solid;
}

.management_button.disabled {
    background: transparent;
}

.sidebar_bottom {
    background-color: @surfaceContainerLow;
    border-radius: 24px 24px 0px 0px;
    transition: all 0.25s ease-in-out;
    /* border-radius: 0px 0px 24px 24px; */
}

.notifications_sidebar_scrollable .notification {
    margin-left: 10px;
    margin-right: 9px;
    border-radius: 14px;
    margin-top: 10px;
    padding: 15px;
    background-color: @background;
    transition: all 0.25s ease-in-out;
}

.notifications_sidebar_scrollable .notification-time {
    color: @primary;
}

.notifications_sidebar_scrollable {
    padding-right: 1px;
    color: @primary;
}

.system_box {
    padding: 10px;
}

.system_scale slider {
    color: @onPrimary;
    background-color: @primary;
    background-size: 20px 20px;
    min-width: 30px;
    min-height: 23px;
    border-radius: 100px;
    padding: 0px;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: -16px;
    margin-bottom: -16px;

}

.system_scale.backlight slider {
    background-image: -gtk-scaled(url("svg/brightness-onPrimary.svg"));
}

.system_scale.backlight {
    margin-bottom: 25px;
}

.system_scale.brightness slider {
    background-image: -gtk-scaled(url("svg/dark-onPrimary.svg"));
}

.system_scale {
    padding: 0px;
    margin: 0px;
}

.system_scale trough {
    background-color: @secondaryContainer;
    min-height: 6px;
    margin-right: 4px;
    margin-left: 4px;
}

.system_scale highlight {
    border-radius: 100px 0px 0px 100px;

    margin-top: -13px;
    margin-bottom: -13px;
    margin-left: -16px;
    background-color: @primary;
}

.system_box .slider_box, .system_box .usage_box, .system_box .info_box {
    background-color: @surfaceContainerLowest;
    padding: 26px;
    border-radius: 14px;
}

.system_box .usage_box {
    padding: 10px;
}

.system_box .info_box {
    padding: 20px;
}

.usage_bar trough {
    background-color: @secondaryContainer;
    min-height: 6px;
}

.usage_bar progress {
    min-width: 6px;
    min-height: 6px;
    background-color: @primary;
    box-shadow: 5px 0px 0px 1px @surfaceContainerLowest;
    border-radius: 100px;
}

.usage_box label {
    color: @onSurface
}

.info_box label {
    color: @onSurface
}

.usage_bar_point {
    background-color: @primary;
    min-width: 6px;
    min-height: 6px;
    border-radius: 100%;
}

.sidebar_buttons {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    outline: none;
    border: none;
}

.dotbuttons_box {
    margin-bottom: 15px;
}

.dotbutton {
    font-size: 10px;
    margin: 0px;
    padding: 3px;
    transition: none;
}

.dotbutton label {
    color: @surfaceContainerHigh;
}

.dotbutton:hover {
}

.dotbutton.active label {
    color: @secondary;
}

/*
.notifications_menu {
    padding: 0px;
    min-width: 50px;
}

.notifications_menu_item {
    padding-right: 35px;
    margin: 0px;
} */

/* -----------------------------------------------------
 * Buttons
 * ----------------------------------------------------- */

/* outline */
.outline_button {
    background-color: transparent;
    border: 1.2px solid;
    border-color: @outline;
    border-radius: 100px;
    padding-left: 24px;
    padding-right: 24px;
}

.outline_button label, .outline_button .icon,
.outline_button .awesome_icon, .outline_button image {
    color: @primary;
}

.outline_button:hover {
    background-color: mix(@primaryFixed, transparent, 0.8);
}

.outline_button:focus {
    background-color: mix(@primaryFixed, transparent, 0.8);
    border-color: @primary;
}

/* filled tonal */
.filled_tonal_button {
    background-color: @secondaryContainer;
    color: @onSecondaryContainer;
    border-radius: 100px;
}

.filled_tonal_button label, .filled_tonal_button .icon,
.filled_tonal_button .awesome_icon, .filled_tonal_button image {
    color: @onSecondaryContainer;
}

.filled_tonal_button:hover {
    background-color: mix(@secondaryContainer, @onSecondaryContainer, 0.05);
    box-shadow: 00px 3px 3px -2px rgba(0, 0, 0, 0.2);
}

.filled_tonal_button:active {
    background-color: mix(@secondaryContainer, @onSecondaryContainer, 0.1);
    box-shadow: none;
}
/* standard icon button */
.standard_icon_button {
    border-radius: 100px;
    background-color: transparent;
    color: @onSurfaceVariant;
}

.standard_icon_button label, .standard_icon_button .icon,
.standard_icon_button .awesome_icon, .standard_icon_button image {
    color: @onSurfaceVariant;
    margin: 0px;
    padding: 0px;
}

.standard_icon_button:hover {
    background-color: mix(@onSurfaceVariant, transparent, 0.8);
}

.standard_icon_button:active {
    background-color: mix(@onSurfaceVariant, transparent, 0.7);
}


/* -----------------------------------------------------
 * Navigation bar
 * ----------------------------------------------------- */


 .navigation {
    background-color: @surfaceContainer;
    padding-top: 3px;
    padding-bottom: 3px;
}

.navigation .label {
    font-weight: normal;
    font-size: 12px;
    margin-top: 3px;
    color: @onSurface;
}

.navigation_button .container {
    border-radius: 16px;
    padding: 5px;
    min-height: 15px;
    min-width: 0px;
    transition-property: min-width, color, background-color, border-color;
}

.navigation_button .icon {
    font-weight: normal;
    color: @onSurface;
}

.navigation_button.active .icon {
    font-weight: bold;
    color: @onSecondaryContainer;
}

.navigation_button .container_outer {
    min-width: 60px;
}

.navigation_button:hover .container {
    background-color: mix(@onSurface, @surfaceContainer, 0.92);
    min-width: 40px;
}

.navigation_button:active .container {
    background-color: mix(@onSurface, @surfaceContainer, 0.9);
    min-width: 40px;
}

.navigation_button.active .container {
    background: @secondaryContainer;
    min-width: 40px;
}


/* -----------------------------------------------------
 * Switch
 * ----------------------------------------------------- */


switch {
	border: 2px solid;
    border-radius: 100px;
    border-color: @outline;
    background-color: @surfaceContainerHighest;
    min-height: 20px;
    padding: 1px;
}

switch slider {
    border-radius: 100%;
    background-color: @outline;
    min-height: 10px;
    margin: 2px;
    min-height: 8px;
    min-width: 16px;
    transition: all 0.2s ease-in-out;
    transition-property: min-height, min-width, color, background-color, border-color, margin;
}

switch:disabled {
	background-color: mix(@surfaceContainerHighest, transparent, 0.3);
    border-color: mix(@onSurface, transparent, 0.3);
}

switch:disabled slider {
    background-color: mix(@onSurface, transparent, 0.3);
}

switch:hover, switch:active {
    background-color: mix(@surfaceContainerHighest, @onSurface, 0.08);
}

switch:hover slider, switch:active slider {
    background-color: @onSurfaceVariant;
}

switch:checked {
	background-color: @primary;
    border-color: transparent;
}

switch:checked slider {
    background-color: @onPrimary;
    border-color: transparent;
    margin: 0px;
    min-height: 10px;
    min-width: 20px;
}

switch:checked:disabled {
	background-color: mix(@onSurface, transparent, 0.3);
    border-color: transparent;
}

switch:checked:disabled slider {
    background-color: mix(@surface, transparent, 0.3);
}

switch:checked:hover, switch:checked:active {
	background-color: @primary;
}

switch:checked:hover slider, switch:checked:active slider {
    background-color: @primaryContainer;
}