@import url('/input-terminal/fonts/fonts.css');

:root {
    --border-rad-1: 5px;
    --border-rad-2: calc(var(--border-rad-1) * 1.4);

    --dark-color-background: #111111aa !important;
    --dark-color-background-secondary: #222222aa !important;
    --dark-color-background-navbar: #030303aa !important;
    --dark-color-background-overlay: #33333366 !important;
    --dark-color-accent: #77777799 !important;

    --light-color-background: #ffffffAA !important;
    --light-color-background-secondary: ##f6f8faaa !important;
    --light-color-background-navbar: ##f6f8faaa !important;
    --light-color-background-overlay: #c8d1da66 !important;
    --light-color-accent: #d1d9e099 !important;

    --accent-1: #535fe5;
    --accent-1-transparent: #535fe5AA;
    --accent-2: #45ddfc;
    --accent-2-transparent: #45ddfcAA;
    --accent-3: #1dfda0;
    --accent-3-transparent: #1dfda0AA;

    --terminal-background: #000000D0;
    --terminal-background-hover: #000000C0;
    --output-background: #000000DD;
    --output-bar-background: hsla(0, 0%, 6%, 0.867);
    --output-bar-text: #575757dd;
    --terminal-text: #efefef;
    --output-text: #d0d0d0;
}

@media (prefers-color-scheme: light) {
    :root {
        --button-hover-gradient-1: #00000022;
        --button-hover-gradient-2: #08080822;
        --button-hover-gradient-3: #10101022;

        --button-color: #a4a4a4;
        --button-active-color: #707070;

        --shadow-color: 0deg 0% 69%;
    }

    :root[data-theme='dark'] {
        --button-hover-gradient-1: #000000D0;
        --button-hover-gradient-2: #080808D0;
        --button-hover-gradient-3: #101010D0;

        --button-color: #505050;
        --button-active-color: #d0d0d0;

        --shadow-color: 0deg 0% 0%;
    }
}

@media (prefers-color-scheme: dark) {

    :root {
        --button-hover-gradient-1: #000000D0;
        --button-hover-gradient-2: #080808D0;
        --button-hover-gradient-3: #101010D0;

        --button-color: #505050;
        --button-active-color: #d0d0d0;

        --shadow-color: 0deg 0% 0%;
    }

    :root[data-theme='light'] {
        --button-hover-gradient-1: #00000022;
        --button-hover-gradient-2: #08080822;
        --button-hover-gradient-3: #10101022;

        --button-color: #a4a4a4;
        --button-active-color: #707070;

        --shadow-color: 0deg 0% 69%;
    }

}

:root {
    --shadow-elevation-low:
        0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.28),
        0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.28),
        0.9px 1.8px 2.3px -2.5px hsl(var(--shadow-color) / 0.28);
    --shadow-elevation-medium:
        0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.29),
        0.8px 1.5px 1.9px -0.8px hsl(var(--shadow-color) / 0.29),
        1.9px 3.8px 4.8px -1.7px hsl(var(--shadow-color) / 0.29),
        4.6px 9.1px 11.5px -2.5px hsl(var(--shadow-color) / 0.29);
    --shadow-elevation-high:
        0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.27),
        1.2px 2.5px 3.1px -0.4px hsl(var(--shadow-color) / 0.27),
        2.3px 4.5px 5.7px -0.7px hsl(var(--shadow-color) / 0.27),
        3.7px 7.4px 9.3px -1.1px hsl(var(--shadow-color) / 0.27),
        5.9px 11.8px 14.8px -1.4px hsl(var(--shadow-color) / 0.27),
        9.2px 18.4px 23.1px -1.8px hsl(var(--shadow-color) / 0.27),
        13.9px 27.9px 35.1px -2.1px hsl(var(--shadow-color) / 0.27),
        20.5px 41px 51.6px -2.5px hsl(var(--shadow-color) / 0.27);
}

@property --gradient-deg {
  syntax: '<angle>';
  initial-value: 30deg;
  inherits: false;
}


@property --gradient-background {
  syntax: '<color>';
  initial-value: #6a6a6a;
  inherits: false;
}


@property --gradient-color-1 {
  syntax: '<color>';
  initial-value: #6a6a6a;
  inherits: false;
}

@property --gradient-color-2 {
  syntax: '<color>';
  initial-value: #8F8F8F;
  inherits: false;
}

@property --gradient-color-3 {
  syntax: '<color>';
  initial-value: #a4a4a4;
  inherits: false;
}

@property --button-background {
  syntax: '<color>';
  initial-value: #00000000;
  inherits: false;
}


@property --button-color-1 {
  syntax: '<color>';
  initial-value: #00000000;
  inherits: false;
}

@property --button-color-2 {
  syntax: '<color>';
  initial-value: #00000000;
  inherits: false;
}

@property --button-color-3 {
  syntax: '<color>';
  initial-value: #00000000;
  inherits: false;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'IBM Plex Sans', sans-serif !important;
    backdrop-filter: blur(10px);
}

h1, h2, h3, h4, h5, h6, .title {
    font-family: 'IBM Plex Mono', monospace !important;
}

input, textarea, button, code, pre, kbd, samp {
    font-family: 'IBM Plex Mono', monospace !important;
}

li > code {
    line-height: 2em;
}

#output-container {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-rad-1);
    background-color: var(--output-background);
}

#output-status, #output-bar {
    display: flex;
    flex-direction: row
}

pre#output {
    padding: 10px 10px 10px 10px;
    min-height: 1em;
    line-height: normal;
    color: var(--output-text);
    overflow-x: auto;
    text-wrap: nowrap;
    margin-bottom: 0;
    scrollbar-width: thin;
    background: none;
    margin: 0;
    scrollbar-color: var(--color-accent) transparent;
}

#output-bar {
    background-color: var(--output-bar-background);
    color: var(--output-bar-text);
    font-size: .8em;
    padding: 5px 8px 7px 8px;
    font-family: 'IBM Plex Mono', monospace;
    line-height: normal;
    justify-content: space-between;
    border-radius: 0 0 var(--border-rad-1) var(--border-rad-1);
}

#output-status {
    column-gap: 1em;
}

#terminal-wrapper, input#termd {
    box-sizing: border-box;
}

input#termd {
    border-radius: var(--border-rad-1);
    background-color: var(--terminal-background);
    color: var(--terminal-text);
    padding: 10px;
    font-family: monospace;
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 3px;
    border: none;
    width: calc(100% - 6px);
    transition: background-color .125s ease-out;
}

input#termd:hover {
    background-color: var(--terminal-background-hover);
}

input#termd:focus {
    outline: none;
    background-color: var(--terminal-background);
}

#terminal-wrapper{
    border-radius: var(--border-rad-2);
    width: 100%;
    background: var(--gradient-background);
    background: linear-gradient(var(--gradient-deg), var(--gradient-color-1) 0%, var(--gradient-color-2) 50%, var(--gradient-color-3) 100%);
    transition: --gradient-deg 1s cubic-bezier(.15,1.24,1,.92), --gradient-background .75s ease-out, --gradient-color-1 .75s ease-out, --gradient-color-2 .5s ease-out, --gradient-color-3 .25s ease-out;
    margin-bottom: 8px;
    box-shadow: var(--shadow-elevation-medium);
}

#terminal-wrapper:has(input#termd:focus) {
    --gradient-deg: -30deg;
    --gradient-background: var(--accent-1);
    --gradient-color-1: var(--accent-1);
    --gradient-color-2: var(--accent-2);
    --gradient-color-3: var(--accent-3);
}

#action-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.button-icon-container {
    width: 1.5em;
    height: 1em;
}

.action-button {
    outline: var(--button-color) 1px solid;
    outline-offset: -0.5px;
    border: none;
    color: var(--button-color);
    background: var(--button-background);
    background: linear-gradient(var(--gradient-deg), var(--button-color-1) 0%, var(--button-color-2) 50%, var(--button-color-3) 100%);
    transition: --gradient-deg .5s cubic-bezier(.15,1.24,1,.92), --button-background .375s ease-out, --button-color-1 .375s ease-out, --button-color-2 .25s ease-out, --button-color-3 .125s ease-out, color .3s ease-out;
    border-radius: 0;
    padding: 3px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-button:hover {
    background-color: unset;
    --button-background: var(--button-hover-gradient-1);
    --button-color-1: var(--button-hover-gradient-1);
    --button-color-2: var(--button-hover-gradient-2);
    --button-color-3: var(--button-hover-gradient-3);
}

.action-button:active {
    --gradient-deg: -30deg;
    --button-background: var(--accent-1-transparent);
    --button-color-1: var(--accent-1-transparent);
    --button-color-2: var(--accent-2-transparent);
    --button-color-3: var(--accent-3-transparent);
    color: var(--button-active-color);
}

.left-end-button {
    border-top-left-radius: var(--border-rad-1);
    border-bottom-left-radius: var(--border-rad-1);
}

.right-end-button {
    border-top-right-radius: var(--border-rad-1);
    border-bottom-right-radius: var(--border-rad-1);
}

#terminal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

#action-slug {
    font-size: .6em;
    color: var(--button-color);
    margin-right: 10px;
    opacity: 0;
    transition: opacity .3s ease-out;
    font-style: italic;
    font-family: 'IBM Plex Mono', monospace !important;
}

#action-slug.action-slug-active {
    opacity: .75;
}

.tsd-navigation > .tsd-accordion,  .tsd-navigation .tsd-accordion-details{
    font-family: 'IBM Plex Mono', monospace !important;
}

.tsd-filter-item, #tsd-theme, .tsd-accordion > .tsd-accordion-summary {
    font-family: 'IBM Plex Sans', sans-serif !important;
}

@media (pointer:coarse) {
    .button-icon-container {
        width: 2.5em;
        height: 1.5em;
    }
    #action-slug {
        font-size: 1em;
    }
}