@import '@fontsource/fira-mono';

:root {
	
	/* Stream style api */

    /* switches */
    --is-dark-number_stream: 0;
    --is-dark-space_stream: ;
    --is-not-dark-space_stream: initial;
	
    /* colors  */

    --color_contrast-white: 96%;
    --color_contrast-lower: 88%;
    --color_contrast-low: 66%;
    --color_contrast-medium: 44%;
    --color_contrast-high: 22%;
    --color_contrast-higher: 9%;
    --color_contrast-black: 0%;

    --color_background_stream: hsl( 
        0, 0%, calc( (1 - var(--is-dark-number_stream))*var(--color_contrast-white) + var(--is-dark-number_stream)*var(--color_contrast-black) ) 
    );
    --color_lower: hsl( 
        0, 0%, calc( (1 - var(--is-dark-number_stream))*var(--color_contrast-lower) + var(--is-dark-number_stream)*var(--color_contrast-higher) ) 
    );
    --color_low: hsl( 
        0, 0%, calc( (1 - var(--is-dark-number_stream))*var(--color_contrast-low) + var(--is-dark-number_stream)*var(--color_contrast-high) ) 
    );

    --color_medium: hsl( 0, 0%, var(--color_contrast-medium) );
    
    --color_high: hsl( 
        0, 0%, calc((1 - var(--is-dark-number_stream))*var(--color_contrast-high) + var(--is-dark-number_stream)*var(--color_contrast-low)) 
    );
    --color_higher: hsl( 
        0, 0%, calc((1 - var(--is-dark-number_stream))*var(--color_contrast-higher) + var(--is-dark-number_stream)*var(--color_contrast-lower)) 
    );
    --color_foreground_stream: hsl( 
        0, 0%, calc((1 - var(--is-dark-number_stream))*var(--color_contrast-black) + var(--is-dark-number_stream)*var(--color_contrast-white)) 
    );

    --color_transparency: 0.6;
    --color_background_stream_transparent: hsla( 
        0, 0%, calc( (1 - var(--is-dark-number_stream))*var(--color_contrast-white) + var(--is-dark-number_stream)*var(--color_contrast-black) ),
        var(--color_transparency)
    );

    /* structure */
	--padding: 1em;
    --margin: 0; 
    
    /* border */
    --border_color: red;
    --border_width: 1px;
    --border_lineType: solid;
    --border: var(--border_width) var(--border_lineType) var(--border_color);

    /* text  */
    --font_family: 'Open Sans', 'Helvetica Neue', sans-serif;
    --font_size: 12px;
    --font_weight: normal;
    --line_height: 14px;
    
    /* input */
	--input_width: 100%;
    --input_height: 64px;
    --graph_height: 100vh;

}


/**
 -- Note: Taken from here --> https://css-tricks.com/overriding-default-button-styles/
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

html {
    box-sizing: border-box;
    font-family: var(--fontFamily_stream);
}

*,
*::before,
*::after {
    box-sizing: inherit;
    font-family: inherit;
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
    color: var(--color_foreground_stream);
    background-color: var(--color_background_stream);
    z-index: var(--ground-floor);
}

 button,
 input,
 optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
   color: var(--color_foreground_stream);
   border: none;
 }
 
 /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
 button,
 input { /* 1 */
   overflow: visible;
   background: none;
 }
 
 /**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */
 button,
 select { /* 1 */
   text-transform: none;
 }
 
 /**
  * Correct the inability to style clickable types in iOS and Safari.
  */
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button;
   border: none;
   color: inherit;
 }

@media (prefers-color-scheme: dark) {
    :root {
        --is-dark-number_stream: 1;  
        --is-dark-space_stream: initial;
        --is-not-dark-space_stream: ;
    }
} 
 
/* application defaults */
.stream_wrapper {
    max-width: 100vw;
    height: 100%;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
}
.stream_progress {
    min-height: 50px;
}
form.step_wrapper {

    /* --form_border: 1px solid blue; */
    --form_border: none;
    --form_width: 100%;
    --form_height: 100%;
    --form_padding: var(--padding);

    --forkedLeaf_width: 30px;
    --forkedLeaf_height: 30px;
    --forkedLeaf_border_radius: 15px;
    --forkedLeaf_background_color: red;
    --forkedLeaf_padding: 5px 0;
    --forkedLeaf_margin: 5px 0;

    width: var(--form_width);
    height: var(--form_height);
    padding: var(--form_padding);
    border: var(--form_border);

    font-family: var(--font_family);

}

.graph {

    --graph_border_color: var(--color_foreground_stream);
    --graph_border: 1px solid var(--graph_border_color);
    --graph_width: 100%;
    --graph_height: var(--graph_width);
    --graph_padding: 0;
    --graph_aspect_ratio: 1 / 1;
    --graph_overflow: clip;
    --graph_z_index: 0;

    width: var(--graph_width);
    /* height: var(--graph_height); */
    padding: var(--graph_padding);

    aspect-ratio: var(--graph_aspect_ratio);
    overflow: var(--graph_overflow);
    z-index: var(--graph_z_index);
}

.stream_buttons {
    --stream_buttons_height: 100px;
    width: 100%;
    height: var(--stream_buttons_height);

    display: grid;
    grid-auto-flow: column;
}
.stream_control {
    --control_width: 100%;
    --control_height: 50px;
    --control_padding: calc(var(--padding) / 3);

    width: var(--control_width);
	min-height: var(--control_height);
    padding: var(--control_padding);
}

input.stream_control {
    --control_border: 1px solid var(--color_low);
    --control_color: var(--color_low);
    --control_background_color: var(--color_lower);
    --control_font_size: 0.9em;
    background-color: var(--control_background_color);
    border: var(--control_border);
}
input.stream_control::-webkit-input-placeholder { /* Edge */
    color: var(--control_color);
    font-size: var(--control_font_size);
}
  
input.stream_control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--control_color);
    font-size: var(--control_font_size);
}
  
input.stream_control::placeholder {
    color: var(--control_color);
    font-size: var(--control_font_size);
}

/* form.stream_wrapper {
    background-color: darkblue;
}



input.stream_control:focus {
	outline: none;
}

input.stream_control.stream_text {
	--textControlBottomBorder: linear-gradient(
		to right, 
		red, 
		rgba(0, 0, 0, 0)
	) 1;
  	border-style: solid;
	border-width: 0 0 3px 0;
	border-image: var(--textControlBottomBorder);
} 

.rounded-button {
	--border: 5px;
	--width: 100px;
	--height: 50px;
	--border-gradient: linear-gradient(to right, blue, orange);

	width: var(--width);
	height: var(--height);

	position: relative;
	box-sizing: border-box;

	color: var(--color_background_stream);
	background: #000;
	background-clip: padding-box;
	
	border-style: solid;
	border-width:  var(--border);
	border-color: transparent;
	
	border-radius: 1em;
}

.rounded-button:before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: calc(-1* var(--border)); 
	border-radius: inherit; 
	background: var(--border-gradient);
} */