/* NerdFont Icons */

@font-face {
            font-family: 'NerdFont';
            src: url('/asset/font/RobotoMonoNerdFontMono-Regular.ttf');
            }


:root {
    
       --c-bg-main: #2E3440;
       --c-bg-overlay: #2E3440;
       --c-bg-highlight: #3B4252;
       
       --c-main: #ECEFF4;
       
       --font-sans: ui-sans-serif, system-ui, sans-serif,
       "Apple Color Emoji", "Segoe UI Emoji",
       "Segoe UI Symbol", "Noto Color Emoji";
       --font-serif: ui-serif, Georgia, Cambria,
       "Times New Roman", Times, serif;
       --font-mono: Roboto Mono, SFMono-Regular, Menlo,
       Monaco, Consolas, "Liberation Mono",
       "Courier New", ui-monospace, monospace;
       
       --font-main: var(--font-mono);
       
       --s-xs: 3px;
       --s-sm: 6px;
       --s-md: 12px;
       --s-lg: 24px;
       --s-xl: 48px;
       
       --s-cell: 32px;
       }


/* https://tailwindcss.com/docs/display */

.block { display: block; }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }

.justify-center { justify-content: center; }
.justify-end { justify-content: end; }

.grid { display: grid; }
.grid-cols-2 { display: grid; grid-template-columns: auto auto; }

.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }
.font-main { font-family: var(--font-main); }

.font-bold {font-weight: 700}
.font-light {font-weight: 300}

.italic { font-style: italic; }

.gap-xs { gap: var(--s-xs); }
.gap-sm { gap: var(--s-sm); }
.gap-md { gap: var(--s-md); }
.gap-lg { gap: var(--s-lg); }
.gap-xl { gap: var(--s-xl); }

.gap-x-xs { column-gap: var(--s-xs); }
.gap-x-sm { column-gap: var(--s-sm); }
.gap-x-md { column-gap: var(--s-md); }
.gap-x-lg { column-gap: var(--s-lg); }
.gap-x-xl { column-gap: var(--s-xl); }

.gap-y-xs { row-gap: var(--s-xs); }
.gap-y-sm { row-gap: var(--s-sm); }
.gap-y-md { row-gap: var(--s-md); }
.gap-y-lg { row-gap: var(--s-lg); }
.gap-y-xl { row-gap: var(--s-xl); }

.p-xs { padding: var(--s-xs); }
.p-sm { padding: var(--s-sm); }
.p-md { padding: var(--s-md); }
.p-lg { padding: var(--s-lg); }
.p-xl { padding: var(--s-xl); }

.pl-sm { padding-left: var(--s-sm); }
.pl-md { padding-left: var(--s-md); }
.pl-lg { padding-left: var(--s-lg); }
.pl-xl { padding-left: var(--s-xl); }

.pr-sm { padding-right: var(--s-sm); }
.pr-md { padding-right: var(--s-md); }
.pr-lg { padding-right: var(--s-lg); }
.pr-xl { padding-right: var(--s-xl); }

.mr-sm { margin-right: var(--s-sm); }
.mr-md { margin-right: var(--s-md); }

.float-left { float: left; }

.text-left { text-align: left; }

.break-words { overflow-wrap: break-word; word-break: break-word; }

.cursor-pointer { cursor: pointer; }

/* custom */

.text-highlight { color: -var(--c-highlight); }
.text-dimmed { color: rgba(255,255,255, 0.3); }

.bg-lightened { background-color: rgba(100,100,100, 0.1); }
.bg-dimmed { background-color: rgba(0,0,0, 0.1); }

.color-attention { background-color: #660}

body {
    width: 100%;
    height: 100%;
    
    /* --c-bg-lines: rgba(0,0,0, 0.2); */
    /* background-size: 20px 20px; */
    /* background-image: */
    /*     linear-gradient(to right, var(--c-bg-lines) 1px, transparent 1px), */
    /*     linear-gradient(to bottom, var(--c-bg-lines) 1px, transparent 1px); */
  
    background-color: var(--c-bg-main);
    color: var(--c-main);
    font-family: var(--font-main);
    line-height: 1.5;
    white-space: pre-wrap;

    overflow-wrap: break-word;
    word-break: break-word;

}

button {
    text-align: left;
}

button::focus {
    /* outline: 2px solid yellow; */
}

#root {
}

dialog {
    background-color: var(--c-bg-main);
    color: var(--c-main);
}

dialog::backdrop {
    background-color: rgba(0,0,0,0.75);
}

input {
    background-color: rgba(0,0,0,0.75);
    color: var(--c-main);
    font-family: var(--font-main);

    width: 100%;

    border: 1px solid var(--c-main);
    border-radius: var(--s-sm);
    padding: var(--s-lg);
}

.DEBUG {
    background-color: #002222;
    padding: var(--s-sm);
    margin: var(--s-sm);
}

.TEST {
    outline: 2px solid red !important;
}

.ERROR {
    background-color: #440000;
    padding: var(--s-sm);
    margin: var(--s-sm);
    word-break: break-word;

    .ERROR_error {
        display: flex;
        flex-direction: column;
        gap: var(--s-sm);
    }

    .ERROR_stack {
        display: flex;
        flex-direction: column;
        gap: var(--s-sm);
    }
    
    .ERROR_cause {
        padding-top: var(--s-sm); 
        /* padding-left: var(--s-sm); */
    }

    
    .ERROR_message {
        font-weight: bold;
    }

    .ERROR_label {
        color: rgba(255,255,255, 0.5);
    }

}

.Code {
    font-family: monospace;
}

/* Dialog */

dialog {
  background-color: var(--c-bg-overlay);
  border: 2px solid #444;
  padding: var(--s-md);
  border-radius: var(--s-md);
}

/* EmbeddedHtml */

.EmbeddedHtml {
    font-family: Roboto;
    white-space: normal;
    color: rgba(255,255,255,0.9);
}

.EmbeddedHtml li {
    margin-left: 16px;
    list-style: circle;
}

.EmbeddedHtml a {
    text-decoration: underline;
}

.EmbeddedHtml p, .EmbeddedHtml ul, .EmbeddedHtml pre {
    /* margin-block-start: 20px; */
    margin-block-end: 16px;
}

.EmbeddedHtml pre {
    background: rgba(0,0,0,0.2);
    padding: var(--s-md);
    border-radius: var(--s-sm);
    overflow-x: auto;
}

.EmbeddedHtml code {
    color: rgba(255,255,255,1);
    font-weight: bold;
    padding: var(--s-sm);
    border-radius: var(--s-sm);
}


/* Cells */

.Cell {
    /* min-width: var(--s-cell); */
    /* min-height: var(--s-cell); */
    padding: var(--s-sm) var(--s-md);
    border-radius: var(--s-sm);

    /* display: flex; */
    /* place-content: center; */
    /* place-items: center; */
    
    /* word-break: break-word; */
    /* min-width: min-content; */
}

.Cell:focus {
    /* background-color: rgba(0,0,255,0.1); */
    /* outline: 2px solid yellow; */
 }


.Button {
    background-color: var(--c-bg-highlight);
    text-align: left;
}

.ParentWithChildren {
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    gap: var(--s-sm);
    
    .ParentWithChildren_parent {
        display: flex;
    }

    .ParentWithChildren_children {
        padding-left: var(--s-md);
        display: flex;
    }
    
  }

.Grid {
    display: grid;
    grid-gap: var(--s-sm);
}