/*
	These styles are auto imported by the widget.
*/

/* first define some variables we will re-use */
:host {
	--font-family: inherit;
	--size: 1.5rem;
	--size-font: var(--size-font, 17px);
	--size-icon: 1.5em;
	--color-text: black;
	--color-background: whitesmoke;
	--color-border: lightgray;
	--color-icon: var(--color-text);
	--color-loading: var(--color-text);
	--color-play: whitesmoke;
	--border-radius: 0.4em;
	--transition-duration: 111ms;
	--transition-timing: ease-in-out;
}

/* default behavior of the component */
:host {
	display: inline-block;
	background-color: var(--color-background);
	border: 0.1em solid var(--color-border);
	border-radius: var(--border-radius);
	transition: background-color var(--transition-duration) var(--transition-timing),
							border-color var(--transition-duration) var(--transition-timing);
}

/* mouse over the host */
:host(:hover) {
	--color-border: var(--color-play);
}

:host(:not([loaded="true"])) {
	opacity: 0;
	--color-border: var(--color-loading);
}

:host([play="true"]) {
	--color-border: white;
	--color-text: darkgray;
	--color-background: var(--color-play);
}

/* the button is our root element, the slots are its children */
button {
	pointer-events: none;
	font-size: var(--size-font);
	font-family: var(--font-family);
	color: var(--color-text);
	padding: calc(var(--size) / 2);

	/* align the children of the button, flex centered */
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;

	/* hide the default styles of the button element,
	 these stylings are now on `:host` */
	background-color: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
}

button slot {
	display: flex;
}

/* default behavior of the slots, children of our component */
/* the slot for text */
slot[name="text"]::slotted(*) {
	font-size: var(--size-font);
	font-family: var(--font-family);
	color: var(--color-text);
	padding: calc(var(--size) / 5);
}

/* the slot for icon */
slot[name="icon"]::slotted(i) {
	font-style: normal; /* `i` always an icon, not a style italic here */
	padding: calc(var(--size) / 5);
	font-size: var(--size-icon);
	color: var(--color-icon);
	transition: color var(--transition-duration) var(--transition-timing),
							opacity var(--transition-duration) var(--transition-timing);
}
:host([play="true"]) slot[name="icon"]::slotted(i) {
	opacity: 0.5;
	color: var(--color-text);
}
slot[name="icon"]::slotted(svg) {
	padding: calc(var(--size) / 3);
	font-size: var(--size-icon);
	color: var(--color-icon);
	fill: var(--color-icon);
	transition: fill var(--transition-duration) var(--transition-timing);
}

/* google material symbols */
slot[name="icon"] span.material-symbols-sharp,
slot[name="icon"] span.material-symbols-rounded,
slot[name="icon"] span.material-symbols-outlined {
	/* problem-with-google-material-symbols: 'contact the button maintainers'; */
	padding: calc(var(--size) / 5);
	font-size: 1.8rem;
}

/*
	font awesome free: https://cdnjs.com/libraries/font-awesome
	the icons are in `i`, and their class start with `fa`
*/
slot[name="icon"] i[class^="fa-"] {
	/* problem-with-font-awesome: '?? contact the button maintainers'; */
	padding: calc(var(--size) / 4);
	font-size: 1.8rem;
}