@import "libs/mdi/css/materialdesignicons.min.css";

:root
{
	--car-col-red:                 #dc3545;
	--car-col-red-decent:          rgba(220, 53, 69, 0.1);
	--car-col-orange:              #ffc107;
	--car-col-orange-decent:       rgba(255, 193, 7, 0.1);
	--car-col-green:               #28a745;
	--car-col-green-decent:        rgba(40, 167, 69, 0.1);
	--car-col-blue:                #1c64af;
	--car-col-blue-decent:         rgba(28, 100, 175, 0.1);

	--bs-font-sans-serif:          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--car-col-primary:             var(--car-col-blue);
	--car-col-primary-decent:      #92cbff;
	--car-col-text:                black;
	--car-col-text-decent:         #6c6c6c;
	--car-col-text-very-decent:    #b9b9b9;

	--car-select-color:            var(--car-col-text);
	--car-select-border:           var(--car-col-primary-decent);
	--car-select-background:       #f7f9fd;

	--car-hover-color:             var(--car-col-primary);
	--car-hover-border:            #C6DDFE;
	--car-hover-background:        #EDF1F8;

	--car-selected-color:          black;
	--car-selected-border:         var(--car-col-primary);
	--car-selected-background:     #daedff;


	--car-bg-decent:               #f3f3f3;
	--car-bg-code:                 #F8F8F8;
	--car-s1:                      2px;
	--car-s2:                      6px;
	--car-s3:                      12px;
	--car-s4:                      15px;
	--car-s5:                      25px;
	--car-s6:                      35px;

	--car-border-radius:           3px;

	--car-text-xxs:                8pt;
	--car-text-xs:                 10pt;
	--car-text-sm:                 12pt;
	--car-text-lg:                 13pt;
	--car-text-xl:                 15pt;
	--car-p-box:                   var(--car-s2) var(--car-s3);

	--car-line-height:             1.3;
	--car-f-normal:                system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--car-f-monospace:             SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	--csharp-background:           var(--car-bg-code);
	--csharp-border:               #e7e7e7;
	--csharp-keyword-color:        #0000FF;
	--csharp-parameter-name-color: #cccccc;
	--csharp-type-color:           #2B91AF;
	--csharp-string-color:         #A31515;
	--csharp-symbol-color:         black;
	--csharp-comment:              #007F00;
}

html, body, div#app
{
	height: 100%;
}

body
{
	font-size:                   var(--car-text-sm);
	font-family:                 var(--car-f-normal);
	line-height:                 var(--car-line-height);
	-webkit-text-size-adjust:    100%;
	-webkit-tap-highlight-color: transparent;
}


pre
{
	background-color: var(--csharp-background);
	border:           1px solid var(--csharp-border);
	border-radius:    var(--car-border-radius);
	font-size:        var(--car-text-xs);

	tab-size:         20px;
	padding:          4px;
	direction:        ltr;
	unicode-bidi:     bidi-override;
	overflow:         auto;
	display:          block;

	margin:           0px;
}
code {
	font-size: .875em;
	color: #e685b5;
	word-wrap: break-word;
}

.csharp-string
{ color: var(--csharp-string-color);}

.csharp-symbol
{ color: var(--csharp-symbol-color);}

.csharp-keyword
{ color: var(--csharp-keyword-color);}

.csharp-parameter-name
{ color: var(--csharp-parameter-name-color);}

.csharp-type
{ color: var(--csharp-type-color);}

.csharp-comment
{ color: var(--csharp-comment);}

.car-red
{ color: var(--car-col-red);}

*
{
	min-width: 0;
}

.car-selectable
{
	color:            var(--car-select-color);
	padding:          var(--car-s2) var(--car-s3);
	border:           1px solid var(--car-select-border);
	background-color: var(--car-select-background);
	transition:       0.1s;
	cursor:           pointer;
}

.car-selectable.decent
{
	background-color: transparent;
	border:           1px solid transparent;
}

.car-selectable:hover
{
	border:           1px solid var(--car-hover-border);
	background-color: var(--car-hover-background);
	color:            var(--car-hover-color);
}

.car-selectable.active
{
	color:            var(--car-selected-color);
	border:           1px solid var(--car-selected-border);
	background-color: var(--car-selected-background);
}

.car-very-decent
{
	color:      var(--car-col-text-very-decent);
	transition: 0.5s;
}

.car-very-decent:hover
{
	color: var(--car-col-text);
}


a, .car-link
{
	text-decoration:  none;
	background-color: transparent;
	color:            var(--car-col-blue);
	border:           0;
	text-align:       left;
}


a:hover, .car-link:hover
{
	text-decoration: underline;
}