@font-face {
  font-family: "NectoMono Regular";
  src: url("/fonts/NectoMono-Regular.woff2") format("woff2");
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

:root {
  --header-height: 2.4rem;
  --footer-height: 2.2rem;
  --gap: 0rem;
  --input-padding: 0.4rem;
  --padding: 0.5rem;
  --outer-padding: 0rem;

  --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-monospace: "NectoMono Regular", monospace;

  --anim-duration: 100ms;

  --color-gray-100: rgba(255, 255, 255, 0.88);
  --color-gray-200: #f8f9fa;
  --color-gray-600: #2d2d30;

  --gray-100: #f7f8f9;
  --gray-100: color(display-p3 0.9686 0.9725 0.9765);
  --gray-200: #d9d9d9;
  --gray-200: color(display-p3 0.851 0.851 0.851);
  --gray-300: #7c858c;
  --gray-300: color(display-p3 0.4941 0.5216 0.5451);
  --gray-400: #44494c;
  --gray-400: color(display-p3 0.2697 0.2838 0.2959);
  --gray-900: #12171a;
  --gray-900: color(display-p3 0.0745 0.0902 0.102);

  --shadow-gray: rgba(217, 217, 217, 0.7);
  --shadow-gray: color(display-p3 0.851 0.851 0.851 / 0.7);

  --white: #fff;
  --white: color(display-p3 1 1 1);

  --mint: #d7f651;
  --mint: color(display-p3 0.8667 0.9608 0.4275);
  --shadow-mint: rgba(215, 246, 81, 0.6);
  --shadow-mint: color(display-p3 0.8667 0.9608 0.4275 / 0.6);

  --ansi-green: #98c379;
  --ansi-red: #e06c75;
}

@media (min-width: 860px) {
  :root {
    --header-height: 4.2rem;
    --footer-height: 3.2rem;

    --gap: 1rem;
    --padding: 1.5rem;
    --outer-padding: 2.25rem;
  }
}

body,
html {
  margin: 0;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  height: 100vh;
  background-color: var(--gray-900);

  /* typography */
  color: var(--white);
  font-family: var(--font-monospace);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem; /* 142.857% */
}

/*  layout */
/*
  header
  #container
    #editorContainer
    #console
      #output
      #inputContainer
  footer
*/

header {
  height: var(--header-height);
  padding: 0 var(--outer-padding);

  display: flex;
  align-items: center;
  justify-content: space-between;

  h1 {
    color: transparent;
    font-size: 1px;
    line-height: 0;
  }

  a {
    display: none;
    margin-left: 1.8rem;
    padding: 0.2rem 0;
    color: var(--gray-200);
    font-family: var(--font-sans-serif);
    text-decoration: none;
    border-bottom: solid 2px var(--gray-400);

    transition: color var(--anim-duration) ease-in-out,
      border-bottom-color var(--anim-duration) ease-in-out;

    &:hover {
      color: var(--gray-100);
      border-bottom-color: var(--gray-300);
    }
  }

  @media (min-width: 860px) {
    a {
      display: inline-block;
    }
  }
}

footer {
  padding: 0 var(--outer-padding);
  line-height: var(--footer-height);
  color: var(--gray-300);
  text-align: right;
  font-family: var(--font-sans-serif);

  a {
    color: var(--gray-300);
    transition: color var(--anim-duration) ease-in-out;

    &:hover {
      color: var(--white);
    }
  }
}

#container {
  position: relative;
  height: calc(100vh - var(--header-height) - var(--footer-height));
  padding-top: 0;
}

#editorContainer,
#output,
#inputContainer {
  border-radius: 4px;
  border: 1px solid var(--gray-400);
  transition: border-color var(--anim-duration) ease-in-out;
}

#inputContainer:has(input:focus),
#editorContainer.focus {
  border-color: var(--gray-300);
}

#editorContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--outer-padding);
  right: 50%;
  padding: var(--padding) 0;
}

#console {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: var(--outer-padding);

  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--gap);
  padding-left: var(--gap);
}

@media screen and (max-width: 860px) {
  #editorContainer {
    position: absolute;
    top: 0;
    bottom: 50%;
    left: 0;
    right: 0;
  }
  #console {
    position: absolute;
    top: calc(50% + 4px);
    left: 0;
    right: 0;
  }
}

#editor {
  height: 100%;
}

#output,
#inputContainer {
  padding: var(--padding);
}

#output {
  flex: 1;
  overflow-y: auto;
}

#output .command {
  padding-left: var(--input-padding);
  transition: background-color var(--anim-duration) ease-in-out;

  &::before {
    content: ">";
    position: relative;
    left: calc(-1 * var(--input-padding));
  }

  &:hover {
    background-color: var(--gray-400);
    cursor: copy;
  }
}

#output {
  & > .success {
    color: var(--ansi-green);
  }

  & > .error {
    color: var(--ansi-red);
  }

  & > .log {
    color: var(--gray-300);
  }
}

#inputContainer form {
  display: flex;
  gap: var(--input-padding);
  align-items: center;

  input {
    background-color: transparent;
    color: var(--color-gray-100);
    flex: 1;
    font-size: 16px;
  }
}

pre {
  white-space: pre-wrap;
}

#copyLink,
#deploy,
#runButton {
  --text-color: var(--gray-900);

  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;

  height: 2.25rem;
  padding: 0.625rem 1.5rem;
  border-radius: 0.1875rem;
  background-color: var(--gray-100);
  box-shadow: 0px 0px 0px 0px var(--shadow-mint);

  color: var(--text-color);
  font-size: 0.875rem;

  &:enabled {
    cursor: pointer;
  }

  &:disabled {
    background-color: var(--gray-300) !important;
    --text-color: var(--gray-400);
  }
}

#copyLink {
  display: none;
  position: absolute;
  bottom: var(--padding);
  right: 7.5rem;
  width: 11rem;

  color: var(--gray-100);
  border: solid 1px var(--mint);
  background-color: var(--gray-900);

  &::after {
    content: "Share code";
  }

  &.clicked::after {
    content: "Link Copied!";
  }

  &.clicked {
    color: var(--gray-900);
    background-color: var(--mint) !important;
  }

  .icon {
    width: 16px;
    height: 16px;
    background-image: url("/images/svgs/copy-link.svg");
  }

  @media screen and (min-width: 600px) {
    & {
      display: inline-flex;
    }
  }

  @media screen and (min-width: 860px) {
    & {
      right: 8.5rem;
    }
  }
}

#deploy {
  position: absolute;
  bottom: var(--padding);
  right: var(--padding);
  background-color: var(--mint);
}

#copyLink,
#deploy {
  box-shadow: 0px 0px 0px 0px var(--shadow-mint);
  transition: box-shadow var(--anim-duration) ease-in-out;

  &:focus,
  &:enabled:hover {
    box-shadow: 0px 4px 24px 0px var(--shadow-mint);
  }
}

#runButton {
  box-shadow: 0px 0px 0px 0px var(--shadow-gray);
  transition: box-shadow var(--anim-duration) ease-in-out;

  svg {
    display: inline;
    position: relative;
    top: 1px;
    left: 1px;
    stroke: var(--text-color);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  &:focus,
  &:enabled:hover {
    box-shadow: 0px 4px 24px 0px var(--shadow-gray);
  }
}

.action-button {
  position: absolute;
  right: 1.75rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  /* center icons */
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 0.375rem;
  border: 2px solid var(--gray-400);

  font-family: var(--font-sans-serif);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: -0.0075rem;
  color: var(--gray-900);

  background-color: var(--gray-900);
  cursor: pointer;
  z-index: 5;

  transition: background-color var(--anim-duration) ease-in-out,
    border var(--anim-duration) ease-in-out;

  &[disabled] {
    cursor: default;
    color: var(--gray-900);
  }

  .icon {
    display: inline;
    width: 1rem;
    height: 1rem;
  }

  /* tooltip designed in css */
  &::before,
  &::after {
    content: "";
    display: none;
    position: absolute;
    background-color: var(--gray-200);
  }
  &::before {
    right: 40px;
    align-items: flex-end;
    padding: 0.5rem 0.6rem;
    border-radius: 0.25rem;
    word-wrap: none;
    text-wrap: none;
    overflow-wrap: none;
    white-space: nowrap;
    z-index: 6;
  }
  &:after {
    width: 1rem;
    height: 1rem;
    border-radius: 2px;
    transform: rotate(45deg) skew(-12deg, -12deg);
    right: 38px;
  }

  &:hover {
    background-color: var(--gray-400);

    &::before,
    &::after {
      display: inline-flex;
    }
  }

  &.clicked {
    background-color: var(--mint);
    border-color: var(--mint);

    &::before,
    &::after {
      display: inline-flex;
    }
  }
}

.checked-icon {
  display: none;
  width: 1rem;
  height: 1rem;
  background-image: url("/images/svgs/checked.svg");
}

button.clicked {
  .checked-icon {
    display: inline;
  }

  .icon {
    display: none;
  }
}

#copyCode {
  top: var(--padding);

  .icon {
    background-image: url("/images/svgs/copy-code.svg");
  }

  &:before {
    content: "Copy code";
  }

  &.clicked::before {
    content: "Copied!";
  }
}