$font: "SF Pro Light";
$bg: rgba(0, 0, 0, 0.5);
$fg: #dedede;
$menu-border: rgba(255, 255, 255, 0.1);
$bar-gap: 8px;

* {
  all: unset;
  font-family: $font;
}

@import "./styles/media-menu.scss";
@import "./styles/power-menu.scss";
@import "./styles/updates-menu.scss";
@import "./styles/tray.scss";

.systray menu {
  font-family: $font;
	border-radius: 10px;
  background-color: rgba(30, 30, 30);
  color: $fg;
	padding: 5px 0px;

	> menuitem {
		padding: 5px 10px;

		&:disabled label {
			color: gray;
		}

		&:hover {
			background-color: #0e4679;
		}
	}

	separator {
		background-color: rgb(60, 60, 60);
		padding-top: 1px;

		&:last-child {
			padding: unset;
		}
	}
}


.eww-overlay {
  background-color: $bg;
  border: 3px solid $menu-border;

  border-radius: 8px;
  padding: 16px 48px;
}

.bar-group {
  background-color: $bg;
  border-radius: 8px;
  padding: 0 calc($bar-gap * 1.5);
  color: $fg;

  > :not(:first-child) {
    margin-left: $bar-gap;
  }
}

.interactive {
  border-radius: 4px;
  transition: background-color 0.4s ease;

  &.active {
    background-color: $fg;
    color: $bg;
    font-weight: bold;
  }

  &:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

.btn {
  border-radius: 4px;
  padding: 10px 15px 10px 10px;
}

.hidden {
  opacity: 0;
}

.workspace {
  padding: 0 8px;

  &.active {
    background-color: $fg;
    color: $bg;
    font-weight: bold;
  }
}