@define-color magenta #888ca6;
@define-color active-window-color @white;
@define-color urgent-window-color @taffy-blue;
@define-color font-color @white;
@define-color menu-background-color @white;
@define-color menu-font-color @black;
@define-color bar-background rgba(0, 0, 0, .6);
@define-color accent @red;
@define-color menu-highlight @magenta;

@define-color transparent rgba(0.0, 0.0, 0.0, 0.0);
@define-color white #FFFFFF;
@define-color black #000000;

/* Top level styling */

.taffy-window * {
	font-family: "Noto Sans", sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: @font-color;
	background-color: @transparent;
	text-shadow: 1px 1px @font-shadow-color;
}

.taffy-box {
	border-color: @white;
	border-style: solid;
	background-color: @bar-background;
	padding: 2px;
	margin: 1px;
	border-radius: 4px;
}

.contents {
	padding: 2px;
	transition: background-color .5s;
	opacity: 1;
}

/* Workspaces styling */

.workspaces .inner-pad {
	box-shadow: none;
	border-width: 0;
}

.workspaces .contents {
	box-shadow: none;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	border-color: @transparent;
}

.workspace-label {
	padding-right: 4px;
	padding-left: 2px;
	padding-top: 0px;
	font-size: 10pt;
	opacity: 1;
	font-weight: bold;
	transition: color .5s;
}

.contents .window-icon {
	border-width: 1px;
}

.active .contents .window-icon {
	opacity: 1;
}

.active .contents {
	background-color: rgba(0, 0, 0, 0.3);
	opacity: 1;
}

.overlay-box {
	transition: background-color .5s;
}

.active .overlay-box {
	padding: 0px;
	/* background-color: rgba(0, 0, 0, 1.0); */
	border-color: @white;
	border-width: 3px;
	opacity: 1;
}

.visible .contents {
	background-color: rgba(255.0, 255.0, 255.0, 0.15);
}

.window-icon-container {
	transition: opacity .5s, box-shadow .5s;
	opacity: 1;
	border-radius: 5px;
	transition: background-color 1s;
}

/* This gives space for the box-shadow (they look like underlines) that follow.
   This will actually affect all widgets, (not just the workspace icons), but
   that is what we want since we want the icons to look the same. */
.auto-size-image, .sni-tray  {
	padding: 1px;
}

.window-icon-container.active {
	background-color: rgba(255.0, 255.0, 255.0, 0.4);
}

.window-icon-container.urgent {
}

.window-icon-container.minimized .window-icon {
	opacity: .3;
}

.window-icon {
	opacity: 1;
	transition: opacity .5s;
}

/* Button styling */

button {
	all: initial;
	background-color: @transparent;
	border-width: 0px;
	border-radius: 0px;
}

button:checked, button:hover .Contents:hover {
	box-shadow: inset 0 -3px @accent;
}

/* Menu styling */

/* The ".taffy-window" prefixed selectors are needed because if they aren't present,
   the top level .Taffybar selector takes precedence */
.taffy-window menuitem *,  menuitem * {
	color: @menu-font-color;
	text-shadow: none;
}

.taffy-window menuitem, menuitem {
	background-color: @menu-background-color;
}

.taffy-window menuitem:hover, menuitem:hover {
	background-color: @menu-highlight;
}

.taffy-window menuitem:hover > label, menuitem:hover > label {
	color: @white;
}
