/* 

  CSS styles for Max 8 objects, v190913
  by Alex Mesker, x37v.com
  https://creativecommons.org/licenses/by/4.0/

  See https://x37v.com/x37v/max/max-objects-in-css/ for usage/examples.

*/

.max.patcher {
	background-color: rgb(229, 229, 229);
  	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGUlEQVQokWMYBcMCbNu27f9oTA59wMDAAACa6gMiLLcnpwAAAABJRU5ErkJggg==');
	/*background: linear-gradient(90deg, rgb(229, 229, 229) 14px, transparent 1%) center, linear-gradient(rgb(229, 229, 229) 14px, transparent 1%) center, rgb(182, 182, 182);
  	background-size: 15px 15px;*/
  	padding: 20px;
}

/*	Note: 'zoom' is a non-standard CSS property (not supported by Firefox or Opera at the time of writing) that can be used to control the magnification level of an element. 
	While transform: scale() should be used instead of this property where possible, 'zoom' is used here as it affects the layout size of the element (unlike CSS transforms, which will overflow surrounding elements). Treat this as a bonus feature that may not work in some browsers. See https://developer.mozilla.org/en-US/docs/Web/CSS/zoom */

[data-zoom] {
	/* transform-origin: left top; */
	/* transform: scale(1); */
	/* zoom: attr(data-zoom %, 100%); Disabled property as it is currently experimental, see: https://developer.mozilla.org/en-US/docs/Web/CSS/attr */
	/* -ms-zoom: attr(data-zoom %, 100%); */
}

[data-zoom='25%'] {
	/* transform: scale(0.25); */
	zoom: 25%;
}
[data-zoom='50%'] {
	/* transform: scale(0.5); */
	zoom: 50%;
}
[data-zoom='75%'] {
	/* transform: scale(0.75); */
	zoom: 75%;
}
[data-zoom='100%'] {
	/* transform: scale(1); */
	zoom: 100%;
}
[data-zoom='125%'] {
	/* transform: scale(1.25); */
	zoom: 125%;
}
[data-zoom='150%'] {
	/* transform: scale(1.5); */
	zoom: 150%;
}
[data-zoom='200%'] {
	/* transform: scale(2); */
	zoom: 200%;
}
[data-zoom='300%'] {
	/* transform: scale(3); */
	zoom: 300%;
}
[data-zoom='400%'] {
	/* transform: scale(4); */
	zoom: 400%;
}


.max.object, .max.message, .max.number, .max.comment {
	font-family: Arial;
	font-size: 12px; /* optional default */
	line-height: 100%;
	display: inline-block;
	white-space: nowrap;
	position: relative;
	margin: 1px;
	vertical-align: baseline;
}
.max.object {
	background-color: rgb(51, 51, 51);
	border-color: rgb(128, 128, 128);
	border-width: 4px 0px;
	border-style: solid;
	color: white;
	padding: 0.125em 4px; /* 1px 4px */
}

.max.message {
	border-radius: 5px;
	color: white;
	background-color: rgb(51, 51, 51);
	background-image: linear-gradient(to bottom, rgb(76, 76, 76), rgb(51, 51, 51));
	padding: 5px 5px;
}

.max.number {
	color: white;
	background-color: rgb(51, 51, 51); /*fallback*/
	padding: 5px 5px 5px 1.25em;
	min-width: 40px;
}

.max.number::before {
	content: "\25B8"; /* HTML arrow entity: 9656 in dec, or 25B8 in hex */
	color: rgb(128, 128, 128);
	font-size: 1.6em;
	position: absolute;
	top: 50%;
	left: 2px;
	line-height: 0;
}

.max.number.selected::before {
	color: rgb(237, 235, 100);
}



.max > ul.inlets, .max > ul.outlets {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
	display: flex;
	justify-content: space-between;
	line-height: 0px;
	position: absolute;
	z-index: 12;
	left: 6px;
	right: 6px;
	/*pointer-events: none;*/
}

.max > ul.inlets { /* .max.message > ul.inlets, .max.number > ul.inlets */
	top: 0px;
}

.max > ul.outlets { /* .max.message > ul.outlets, .max.number > ul.outlets */
	bottom: 0px;
}

.max.object > ul.inlets {
	top: -4px;
}

.max.object > ul.outlets {
	bottom: -4px;
}

.max.comment > ul.inlets {
	top: -1px;
	left: 5px;
}



/* Inlet/outlet colours */
.max > ul.inlets li, .max > ul.outlets li {
	height: 4px;
	width: 7px;
	background-color: rgb(192, 194, 196);
	transition: background-color 0.15s;
}

.max.message > ul.inlets li, .max.number > ul.inlets li,
.max.message > ul.outlets li, .max.number > ul.outlets li {
	background-color: rgb(114, 114, 114);
}

.max.comment > ul.inlets li, .max.comment > ul.outlets li {
	background-color: rgb(181, 181, 181);
	background-color: rgba(0, 0, 0, 0.25);
}

.max.comment.bubble ul.inlets, .max.comment.bubble ul.outlets {
	display: none;
}

.max > ul.inlets li {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
.max > ul.outlets li {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

/* Disabled
.max > ul.inlets li:hover, .max > ul.outlets li:hover {
	background-color: white;
	border: 2px solid rgb(252 147 130);
}
*/


/* ---------- Begin Comments ---------- */




.max.comment {
	font-size: 12px;
	display: inline-block;
	padding: 3px 7px 3px 5px;
	min-width: 100px;
	border: 1px solid rgb(178, 178, 178);
}

.max.comment.bubble {
	padding: 4px 7px 4px 5px;
	min-width: initial;
	border: 1px solid rgb(199, 199, 199);
	background-color: white;
	background-image: linear-gradient(to bottom, rgb(255, 255, 255) 75%, rgb(237, 237, 237) 100%);
	border-radius: 12px;
	position: relative;
	z-index: 10;
}

.max.bubble {
/* 	margin: 20px; */
}

.max.comment.bubble.unlocked {
	outline: 1px solid gray;
}

.max.comment.bubble.multiline {
	min-height: 2em; /* ensures left/right arrow aligns */
}

.max.comment.bubble[data-arrow="bottom"] {
	background-image: linear-gradient(to bottom, rgb(255, 255, 255) 100%, rgb(237, 237, 237) 100%);
}

.max.comment.bubble::before, .bubble::after {
	position: absolute;
	content: "";
	border: 0 solid transparent;
	z-index: 11;
}

.max.comment.bubble[data-arrow="left"]::before {
	border-right-color: rgb(209, 209, 209);
	border-width: 1px 16px 1px 0px;
	width: 0;
	height: 2px;
	top: 50%;
	right: 100%;
	margin-top: -2px;
}

.max.comment.bubble[data-arrow="left"]::after {
	border-right-color: rgb(255, 255, 255);
	border-width: 1px 8px 1px 0px;
	width: 0px;
	height: 0px;
	top: 50%;
	right: 100%;
	margin-top: -1px;
}

.max.comment.bubble[data-arrow="right"]::before {
	border-left-color: rgb(209, 209, 209);
	border-width: 1px 0px 1px 16px;
	width: 0px;
	height: 2px;
	top: 50%;
	left: 100%;
	margin-top: -2px;
}

.max.comment.bubble[data-arrow="right"]::after {
	border-left-color: rgb(255, 255, 255);
	border-width: 1px 0px 1px 8px;
	width: 0px;
	height: 0px;
	top: 50%;
	left: 100%;
	margin-top: -1px;
}

.max.comment.bubble[data-arrow="top"]::before {
	border-bottom-color: rgb(209, 209, 209);
	border-width: 0px 7px 16px 7px;
	width: 2px;
	height: 0px;
	left: 50%;
	bottom: 100%;
	margin-left: -8px;
}

.max.comment.bubble[data-arrow="top"]::after {
	border-bottom-color: rgb(255, 255, 255);
	border-width: 0px 7px 15px 7px;
	width: 0px;
	height: 0px;
	left: 50%;
	bottom: 100%;
	margin-left: -7px;
}

.max.comment.bubble[data-arrow="bottom"]::before {
	border-top-color: rgb(209, 209, 209);
	border-width: 16px 7px 0px 7px;
	width: 2px;
	height: 0px;
	left: 50%;
	top: 100%;
	margin-left: -8px;
}

.max.comment.bubble[data-arrow="bottom"]::after {
	border-top-color: rgb(255, 255, 255);
	border-width: 15px 7px 0px 7px;
	width: 0px;
	height: 0px;
	left: 50%;
	top: 100%;
	margin-left: -7px;
}


/* Ensure fat arrows on multilines */ 
.max.comment.bubble.multiline[data-arrow="left"]::before {
	border-width: 7px 16px 7px 0px;
	margin-top: -8px;
}

.max.comment.bubble.multiline[data-arrow="left"]::after {
	border-width: 7px 15px 7px 0px;
	margin-top: -7px;
}

.max.comment.bubble.multiline[data-arrow="right"]::before {
	border-width: 7px 0px 7px 16px;
	margin-top: -8px;
}

.max.comment.bubble.multiline[data-arrow="right"]::after {
	border-width: 7px 0px 7px 15px;
	margin-top: -7px;
}

/* Add margins to accommodate arrows */
.max.comment.bubble[data-arrow="left"] {
	margin-left: 16px;
}
.max.comment.bubble[data-arrow="top"] {
	margin-top: 16px;
}
.max.comment.bubble[data-arrow="right"] {
	margin-right: 16px;
}
.max.comment.bubble[data-arrow="bottom"] {
	margin-bottom: 16px;
}



/* ---------- End Comments ---------- */