
.audio-editor {
	@extend .background;
}

.track-content {
	@extend .notebook;
}
.audio-editor .controls {
	@extend .titlebar;
}
.menu .menu-item {
	/* NOTE: not inheriting .menu .menu-item:hover here */
	@extend .menu .menuitem;
}
.menu .menu-item:focus,
.menu .menu-item:not([disabled]):hover {
	outline: 0;
	@extend .menu .menuitem:hover;
}

.menu .menu-item[disabled] {
	@extend .menu .menuitem *:disabled;
}

.dropdown-menu {
	/*@extend .window-frame.active.csd;*/
	/*@extend .window-frame.menu.csd.active;*/
	/*@extend .window-frame;*/
	/*@extend .csd;*/
	/*@extend .active;*/
	/* XXX: FIXME: Y U NO WORK? */
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0,0,0,.2),0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
	margin: 0;
	/* XXX: box-shadow has to be overridden in elementary-dark.css because we couldn't use @extend here */
}
.menu hr {
	@extend .menuitem.separator;
	/* in Gtk it uses padding for the margin */
	padding: 0;
	margin: 4px 0;
	
	border-left: 0;
	border-right: 0;
}

.info-bar {
	@extend GtkInfoBar;
}
.gtk-label {
	@extend GtkLabel;
}
.info-bar .gtk-label {
	@extend GtkInfoBar GtkLabel;
}
.info-bar.warning .gtk-label {
	@extend GtkInfoBar.warning GtkLabel;
}
.info-bar.info .gtk-label {
	@extend GtkInfoBar.info GtkLabel;
}
.info-bar.error .gtk-label {
	@extend GtkInfoBar.error GtkLabel;
}
.info-bar.question .gtk-label {
	@extend GtkInfoBar.question GtkLabel;
}

.audio-editor .button[aria-pressed="true"] {
	@extend .button:active;
}

/*
XXX: FIXME: Y U NO WORK?
.document-controls button {
	@extend .titlebar .button.image-button;
}
*/

body,
.controls {
	border-radius: 0 !important;
	margin: 0 !important;
}
.controls .document-controls button {
	border: 1px solid transparent !important;
	box-shadow: none;
	background: transparent;
	border-radius: 50% !important;
	width: 26px;
	height: 26px;
	margin-left: 8px;
	padding: 0;
}
.controls .document-controls button:active,
.controls .document-controls .menu-open button {
	background: rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}
.controls .document-controls button:focus {
	border-radius: 2px !important;
	border-color: #3d9bda !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 0 rgba(255,255,255,.45),inset 0 -1px 0 0 rgba(255,255,255,.15),0 0 0 1px rgba(61,155,218,.25);
}

.document-controls button > i {
	color: transparent !important;
	text-shadow: none;
	width: 24px;
	height: 24px;
}
.document-controls button > i::before {
	/* for Microsoft Edge */
	display: none !important;
}

.document-controls .icon-gear {
	background: url("images/gear.svg");
}
.document-controls .icon-export {
	background: url("images/document-export.svg");
}
.document-controls .icon-import {
	background: url("images/document-import.svg");
}
.document-controls .icon-document-new {
	background: url("images/document-new.svg");
}

.beat-track .track-content,
.unknown-track .track-content {
	height: 24px; /* = height of buttons */
}
.unknown-track .track-content {
	display: flex;
	align-items: center;
	padding: 0 3px;
}

.audio-clip {
	stroke: white;
	stroke: currentColor;
}
.midi-notes rect {
	fill: white;
	fill: currentColor;
}

.getting-started p {
	margin: 1em;
}

.selection {
	/* @TODO: try the elementary selection styles with the gradient */
	background: rgba(0, 193, 255, 0.25);
	box-shadow: 0 0 0px 1px rgba(0, 193, 255, 0.5);
}
.position-indicator {
	transform: translateX(-1px);
	border-left: 1px solid white;
	border-right: 1px solid black;
}
