/*
  Copyright © 2025 Cristian Felipe Patiño Rojas
  Released under the MIT License
*/

*,
::before,
::after {
    box-sizing: border-box; /* 1 */
    border-width: 0; /* 2 */
    border-style: solid; /* 2 */
}

::before,
::after {
    --tw-content: "";
}

html,
:host {
    line-height: 1.5; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -moz-tab-size: 4; /* 3 */
    tab-size: 4; /* 3 */
}

body {
    margin: 0; /* 1 */
    line-height: inherit; /* 2 */
}

hr {
    height: 0; /* 1 */
    color: inherit; /* 2 */
    border-top-width: 1px; /* 3 */
}

abbr:where([title]) {
    text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: inherit;
}

b,
strong {
    font-weight: bolder;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

table {
    text-indent: 0; /* 1 */
    border-color: inherit; /* 2 */
    border-collapse: collapse; /* 3 */
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-feature-settings: inherit; /* 1 */
    font-variation-settings: inherit; /* 1 */
    font-size: 100%; /* 1 */
    font-weight: inherit; /* 1 */
    line-height: inherit; /* 1 */
    letter-spacing: inherit; /* 1 */
    color: inherit; /* 1 */
    margin: 0; /* 2 */
    padding: 0; /* 3 */
}

button,
select {
    text-transform: none;
}

button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
    -webkit-appearance: button; /* 1 */
    background-color: transparent; /* 2 */
    background-image: none; /* 2 */
}

:-moz-focusring {
    outline: auto;
}

:-moz-ui-invalid {
    box-shadow: none;
}

progress {
    vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

summary {
    display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

dialog {
    padding: 0;
}

textarea {
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    opacity: 1; /* 1 */
}

button,
[role="button"] {
    cursor: pointer;
}

:disabled {
    cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block; /* 1 */
    vertical-align: middle; /* 2 */
}

img,
video {
    max-width: 100%;
    height: auto;
}

[hidden]:where(:not([hidden="until-found"])) {
    display: none;
}

/* dark no colors*/
:root {
    --background: #242120;
    --comment-color: #bab6b1;
    --text-color: white;
    --keyword-color: #797673;
    --selection-color: #292524;
    --borders-color: black;

    --caret-color: #f1d5bf;
    --selection-text-color: var(--keyword-color);
    --line-count-color: var(--keyword-color);
    --type-definition-color: var(--text-color);
    --other-definition-color: var(--text-color);
    --type-color: var(--comment-color);
    --custom-type-color: var(--comment-color);
    --property-color: var(--comment-color);
    --call-color: var(--keyword-color);
    --console-color: var(--text-color);
    --console-bg-color: var(--background);
    --string-color: #bab6b1;
    --string-bg-color: #312e2d;

    --article-width: 700px;

    --keyword-weight: bold;
    --gotoline-bg-color: #242120;
    --gotoline-border-color: gray;

    --toggle-color-first: color(display-p3 0.933 0.506 0.69);
    --toggle-color-second: color(display-p3 0.537 0.863 0.984);
    --toggle-color-third: color(display-p3 0.733 0.941 0.894);

    --toggle-color-border: white;
    --button-bg-color: rgba(1, 1, 1, 0.1);
    --output-filter: grayscale(1);
}

/* light no color */
.light-mode {
    --background: #f8f6f5;
    --comment-color: #3b3a38;
    --text-color: black;
    --keyword-color: #797673;
    --selection-color: #292524;
    --borders-color: #D9D9D9;

    --caret-color: #f1d5bf;
    --selection-text-color: var(--keyword-color);
    --line-count-color: var(--keyword-color);
    --type-definition-color: var(--text-color);
    --other-definition-color: var(--text-color);
    --type-color: var(--keyword-color);
    --custom-type-color: var(--keyword-color);
    --property-color: var(--comment-color);
    --call-color: var(--keyword-color);
    --console-color: var(--text-color);
    --console-bg-color: var(--background);

    --article-width: 700px;

    --gotoline-bg-color: #ececec;
    --gotoline-border-color: gray;

    --caret-color: #797673;
    --toggle-color-border: black;
    --string-bg-color: #fbfbfb;
    --string-color: var(--keyword-color);
}

/* dark colored */
.colored {
    --background: color(display-p3 0.161 0.165 0.184);
    /*--background: #0b0c11;*/
    --keyword-color: color(display-p3 0.933 0.506 0.69);
    --custom-type-color: rgb(172, 243, 227);
    --type-color: color(display-p3 0.835 0.733 0.98);
    --call-color: color(display-p3 0.537 0.753 0.706);
    --property-color: color(display-p3 0.733 0.941 0.894);
    --number-color: color(display-p3 0.839 0.792 0.525);
    --string-color: color(display-p3 0.937 0.533 0.463);
    --comment-color: color(display-p3 0.506 0.549 0.592);
    --dotAccess-color: color(display-p3 0.671 0.514 0.898);
    --preprocessing-color: color(display-p3 0.949 0.647 0.373);
    --line-count-color: rgb(100, 101, 106);
    --type-definition-color: color(display-p3 0.537 0.863 0.984);
    --other-definition-color: color(display-p3 0.412 0.682 0.784);
    --selection-color: #b3d7ff;
    --selection-text-color:;
    --console-bg-color: color(display-p3 0.118 0.118 0.118);
    --caret-color: rgb(0, 181, 255);

    --toggle-color-first: black;
    --toggle-color-second: gray;
    --toggle-color-third: lightgray;
    --gotoline-bg-color: rgb(56, 56, 56);
    --output-filter:;
}

/* light colored */
.light-mode.colored {
    --background: white;
    --keyword-color: #6627b9;
    --console-bg-color: var(--text-color);
    --type-definition-color: #005c88;
    --other-definition-color: black;
    --custom-type-color: #3786c1;
    --type-color: #3e1e81;
    --property-color: black;
    --call-color: #49919b;
    --string-color: #c07224;
    --string-bg-color: #fcfcf5;
    --text-color: black;
    --keyword-weight: regular;
    --type-definition-weight: bold;
    --type-definition-color: #3a1d72;

    --custom-type-bg-color: #fbfcfc;
    --line-count-color: #b2b2b2;
    --gotoline-bg-color: #ececec;
    --gotoline-border-color: #c7c7c7;
    --caret-color: #007aff;
    --comment-color: #242120;
    --selection-color: #b3d7ff;
    --selection-text-color: ;
    --console-bg-color: white;
    --dotAccess-color: #7653c1;
    --dotAccess-bg-color: #f3f2ff;
    --number-color: #7653c1;
    --number-bg-color: var(--dotAccess-bg-color);

    --call-color: #3a1d72;
    --call-font-weight: bold;
}

.theme-toggle {
    color: var(--floating-button-color);
    transition: opacity 0.3s;
    opacity: 0.5;
}

.theme-toggle:hover {
    opacity: 1;
}

body {
    background: var(--background);
    color: var(--text-color);
}

body,
#top-controls-content,
.draggerTop {
    transition: background 0.3s ease;
}

/* Fonts */
body,
pre code .comment {
    font-family: "Inter";
}

code,
kbd,
samp,
pre {
    font-family:
        "JetBrains Mono", "Fira Code", "SF Mono", "Menlo", "Monaco", "Consolas",
        "Liberation Mono", "IBM Plex Mono", "Courier New", monospace;
    font-size: 1em; /* 4 */
}

#code {
    transition: background 10s ease;
    margin-top: 40px;
}

pre code {
    margin-left: -40px;
}

pre code img {
    //margin-left: 40px;
}
pre code .line-number {
    color: var(--line-count-color);
    font-size: 12px;
    width: 24px;
    display: inline-block;
    text-align: right;
    margin-right: 16px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

pre code .line-number:has(+ .comment),
pre code .comment .line-number,
pre code .line-number.empty-line {
    opacity: 0;
}

pre code {
    display: block;
    color: var(--text-color);
    line-height: 1.4em;
    font-size: 18px;
    overflow-x: hidden;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
}

pre code .keyword,
pre code .keyword-extension {
    color: var(--keyword-color);
    font-weight: var(--keyword-weight);
}

pre code .keyword-extension + .custom-type,
pre code .keyword-extension + .type {
    color: var(--type-definition-color);
    font-weight: var(--type-definition-weight);
}

pre code .type {
    color: var(--type-color);
}

pre code .call {
    color: var(--call-color);
    font-weight: var(--call-font-weight);
}

pre code .property {
    color: var(--property-color);
}

pre code .number {
    color: var(--number-color);
    background: var(--number-bg-color);
}

pre code .string {
    color: var(--string-color);
    background: var(--string-bg-color);
}

pre code .comment {
    color: var(--comment-color);
}

pre code .dotAccess {
    color: var(--dotAccess-color);
    background: var(--dotAccess-bg-color);
}

pre code .preprocessing {
    color: var(--preprocessing-color);
}

pre code .type-definition {
    color: var(--type-definition-color);
    font-weight: var(--type-definition-weight);
}

pre code .custom-type {
    color: var(--custom-type-color);
    background: var(--custom-type-bg-color);
}

pre code .other-definition {
    color: var(--other-definition-color);
}

pre code span {
    transition: color 0.5s ease;
}

pre code .keyword {
    transition: font-weight 0.3s;
}

::-webkit-selection,
::selection {
    background-color: var(--selection-color);
    color: var(--selection-text-color);
}

/* El bloque seleccionado */
.selected-block {
    position: absolute;
    top: 0;
    left: -20px;
    right: 0;
    bottom: 0;
    width: 100vw;
    background-color: var(--background);
    z-index: 1;
    cursor: default;
}
.selected {
    background: var(--selected-color);
}

/* .line-number,
.content {
position: relative;
z-index: 2;
pointer-events: none;
} */

#console {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28px;
    width: 100%;
    background: var(--console-bg-color);
    color: var(--console-color);
    z-index: 3;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    transition: height 0.25s;
    overflow: scroll;
    overflow-x: hidden;
    //padding-bottom: 32px;
    border-top: 1px solid var(--borders-color);
}

#console.show {
    height: 300px;
}

#console #output {
    margin-top: 24px;
}

#console .draggerTop {
    position: sticky;
    top: 0;
    height: 28px;
    background: var(--menus-background);
    user-select: none;
    cursor: row-resize;

    border-bottom: 1px solid var(--borders-color);
    padding-left: 16px;
    padding-right: 16px;
}

#console .draggerTop button svg {
    height: 18px;
    width: 18px;
}

#console .draggerTop #show-console-button {
    stroke: var(--line-count-color);
}

#output {
    filter: var(--output-filter);
}

#code {
    /* Console max height*/
    padding-bottom: 300px;
}

.button {
    width: 40px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    transition: background 0.2s;
}

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

.button svg {
    width: 16px;
    fill: rgb(112, 112, 112);
}

#top-controls {
    height: 40px;
    background: var(--background);
    border-bottom: 1px solid var(--borders-color);
    color: white;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    display: flex;
    align-items: center;
    --padding: 24px;
    padding-left: var(--padding);
    padding-right: var(--padding);
}

#top-controls-content {
    display: flex;
}

#output,
#code,
#top-controls-content,
#article-info {
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
    transition: width 0.5s;
    -webkit-transition: width 0.5s;
    -moz-transition: width 0.5s;
}

.article-width {
    width: var(--article-width) !important;
    margin: auto;
}

#article-info {
    margin-top: 80px;
}

img {
    filter: grayscale(100%);
}
#article-info .author-picture {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
}

#article-info .author-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#article-info .author {
    color: var(--text-color);
    font-style: normal;
}

#article-info time {
    color: var(--comment-color);
}

input:focus {
    outline: none; /* Quita el contorno por defecto */
    border: none; /* Opcional: elimina el borde si existe */
}

.hide {
    display: none;
}

#go-to-line {
    position: fixed;
    top: 240px;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    z-index: 5;
}

#go-to-line #line-input {
    width: 460px;
    height: 48px;
    padding-left: 12px;
    border-radius: 8px;
    caret-color: var(--caret-color);
    color: var(--text-color);
    background: var(--gotoline-bg-color);
    -webkit-box-shadow: -1px 18px 42px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -1px 18px 42px 8px rgba(0, 0, 0, 0.3);
    box-shadow: -1px 18px 42px 8px rgba(0, 0, 0, 0.3);
    /*-webkit-box-shadow: -1px 18px 42px 8px rgba(0,0,0,0.64);*/
    /*-moz-box-shadow: -1px 18px 42px 8px rgba(0,0,0,0.64);*/
    /*box-shadow: -1px 18px 42px 8px rgba(0,0,0,0.64);*/
    border: 0.5px solid var(--gotoline-border-color);
}

#code img {
    padding-left: 40px;
    min-width: 100%;
}

#floating-buttons {
    --width: 24px;
    position: fixed;
    justify-content: center;
    align-items: center;
    /*right: calc(50% - var(--article-width) / 2 - var(--width) - 180px);*/
    right: 20px;
    transform: translateY(-50%);
    top: 50%;
    width: var(--width);
    z-index: 4;
}

#floating-buttons svg {
    width: var(--width);
    height: var(--width);
}

#toggle-color {
    height: 24px;
    width: 24px;
    display: flex;
    direction: row;
    border: 2.5px solid var(--toggle-color-border);
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.5;
    transition: opacity 0.3s;
}

#toggle-color:hover {
    opacity: 1;
}

#toggle-color .first {
    background: var(--toggle-color-first);
    height: 100%;
    width: 8px;
}

#toggle-color .second {
    background: var(--toggle-color-second);
    height: 100%;
    width: 8px;
}

#toggle-color .third {
    background: var(--toggle-color-third);
    height: 100%;
    width: 8px;
}
/**/
/*main {*/
/*position: fixed;*/
/*width: 100%;*/
/*left: 300px;*/
/*overflow-y: scroll;*/
/*}*/
/**/
/*#navigator {*/
/*position: fixed;*/
/*width: 300px;*/
/*top: 0;*/
/*background: var(--background);*/
/*height: 100vh;*/
/*border-right: 1px solid var(--borders-color);*/
/*z-index: 10;*/
/*padding: 16px;*/
/*}*/