/*
 * C# Fiddle styles
 */

/* theme */

:root {
   --color-accent: #7c5cff;
   --color-accent-hover: #6a4be8;
   --color-accent-light: #b3a1ff;
   --color-background: #1e1e1e;
   --color-border: #3c3c3c;
   --color-error: #f48771;
   --color-muted: #9d9d9d;
   --color-panel: #252526;
   --color-text: #d4d4d4;
   --color-warning: #cca700;
   --font-code: Consolas, 'Cascadia Code', 'Fira Code', monospace;
   --font-primary: 'Segoe UI', Roboto, Arial, sans-serif;
}

/* elements */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html,
body {
   height: 100%;
}

body {
   background-color: var(--color-background);
   color: var(--color-text);
   display: flex;
   flex-direction: column;
   font-family: var(--font-primary);
   font-size: 15px;
}

main {
   flex: 1;
   min-height: 0;
}

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

kbd {
   border: 1px solid var(--color-border);
   border-radius: 3px;
   padding: 0 4px;
}

/* classes */

.visually-hidden {
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;
}

.header {
   align-items: baseline;
   border-bottom: 1px solid var(--color-border);
   display: flex;
   flex-wrap: wrap;
   gap: 4px 20px;
   padding: 10px 16px;
}

.header__title {
   font-size: 20px;
}

.header__hint {
   color: var(--color-muted);
   font-size: 13px;
}

.footer {
   border-top: 1px solid var(--color-border);
   color: var(--color-muted);
   font-size: 12px;
   padding: 6px 16px;
}

.workspace {
   display: grid;
   grid-template-rows: 60vh auto;
   height: 100%;
}

.workspace__editor {
   min-height: 0;
}

.editor {
   height: 100%;
}

.workspace__side {
   background-color: var(--color-panel);
   border-top: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-height: 0;
   padding: 12px 16px;
}

.toolbar {
   align-items: center;
   display: flex;
   gap: 10px;
}

.button {
   background-color: var(--color-border);
   border: 0;
   border-radius: 4px;
   color: var(--color-text);
   cursor: pointer;
   font: inherit;
   padding: 8px 16px;
}

.button:hover {
   background-color: #4a4a4a;
}

.button:disabled {
   cursor: wait;
   opacity: 0.6;
}

.button--primary {
   background-color: var(--color-accent);
   color: white;
   font-weight: 600;
}

.button--primary:hover {
   background-color: var(--color-accent-hover);
}

.status {
   color: var(--color-muted);
   font-size: 13px;
}

.field {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.field--grow {
   flex: 1;
   min-height: 150px;
}

.field__title {
   color: var(--color-muted);
   font-size: 13px;
   font-weight: 600;
}

.output {
   background-color: var(--color-background);
   border: 1px solid var(--color-border);
   border-radius: 4px;
   flex: 1;
   font-family: var(--font-code);
   overflow: auto;
   padding: 8px;
   white-space: pre-wrap;
   word-break: break-word;
}

.output__echo {
   color: var(--color-accent-light);
}

.output__error {
   color: var(--color-error);
}

.output__warning {
   color: var(--color-warning);
}

.output__info {
   color: var(--color-muted);
}

.output__input {
   background-color: var(--color-panel);
   border: 1px solid var(--color-accent);
   border-radius: 3px;
   color: var(--color-text);
   font: inherit;
   min-width: 200px;
   padding: 1px 6px;
}

/* media queries */

@media (width >= 900px) {
   .workspace {
      grid-template-columns: 3fr 2fr;
      grid-template-rows: 1fr;
   }

   .workspace__side {
      border-left: 1px solid var(--color-border);
      border-top: 0;
   }
}