/*! all css to apply in composables and composants mytril */

/* Base
   ========================================================================== */

html {
	font-family: var(--font-sans);
	tab-size: 4;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
	background-color: var(--color-background);
	color: var(--color-on-background);
	transition:
		color 0.5s,
		background-color 0.5s;
}

pre,
code {
	font-family: var(--font-mono);
}

/* Reset
    @based on normalize.css: https://necolas.github.io/normalize.css/8.0.1/normalize.css
   ========================================================================== */

body {
	margin: 0;
}

main {
	display: block;
}

button,
input,
optgroup,
select,
textarea {
	font: inherit;
}

button {
	overflow: visible;
}

button,
[type='button'],
[type='reset'],
[type='submit'],
[role='button'] {
	cursor: pointer;
	color: inherit;
}
button,
input,
select,
textarea {
	background-color: transparent;
	border-style: none;
}

*:not(body) {
	outline: none !important;
}

*:not(body):focus-visible {
	box-shadow: 0px 0px 0px 3px var(--color-outline);
	transition: box-shadow 0.5s;
}

* {
	padding: 0;
	margin: 0;
}

img {
	border-style: none;
}

*,
::before,
::after {
	background-repeat: no-repeat;
	box-sizing: inherit;
}

::before,
::after {
	text-decoration: inherit;
	vertical-align: inherit;
}

[type='search'] {
	-webkit-appearance: textfield;
	appearance: textfield;
	outline-offset: -2px;
}

/* Code
   ========================================================================== */
.code .preview-code {
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid var(--color-outline);
	position: relative;
	border-radius: 8px;
	transition: border-color 0.5s;
}

.code .code-wrapper {
	width: 100%;
	display: grid;
}

/* Area Event
   ========================================================================== */
.no-scroll {
	overflow: hidden !important;
}

.fill-height {
	height: 100% !important;
}