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

@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;

/* Top level styling */

.taffy-window * {
	font-family: "Noto Sans", sans-serif;
	font-size: 10pt;
	color: @font-color;
}

.taffy-box {
	border-color: @white;
	border-style: solid;
	border-radius: 0px;
}

.inner-pad {
	padding: 3px;
}

.contents {
	padding: 1px;
	transition: border-color .5s, background-color .5s, border-style 3s;
	border-radius: 6px;
	/* This transparent border is needed because we will run in to sizing issues
	   without it because we only check sizing one time. */
	border-color: @transparent;
	border-width: 2px;
	border-style: solid;
}

/* Workspaces styling */

.workspace-label {
	padding-right: 3px;
	padding-left: 2px;
	font-size: 10pt;
}

.active .contents {
	background-color: rgba(0.0, 0.0, 0.0, 0.2);
	border-color: @font-color;
	border-style: solid;
}

.visible .contents {
	background-color: rgba(0.0, 0.0, 0.0, 0.2);
	border-style: dotted;
	border-color: @font-color;
}

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

/* 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: 0px;
}

.window-icon-container.active {
	background-color: @font-color;
}

.window-icon-container.urgent {
}

.window-icon-container.inactive .window-icon {
	padding: 0px;
}

.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 @taffy-blue;
}

/* 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;
}

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

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

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