@import url("src/css/FocusEditor.css?{{LAST_GIT_COMMIT_HASH}}");
@import url("src/css/themes/plex-mono/plex-mono.css?{{LAST_GIT_COMMIT_HASH}}");

:root {
  --nav-height: 3rem;
  --font-family:
    "IBM Plex Mono", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
    Liberation Mono, monospace;
  color-scheme: light dark;
}

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--font-family);
  background: light-dark(#fff, #202020);
}

nav {
  height: var(--nav-height);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: grid;
  place-content: center;
  /* From https://css.glass */
  background: light-dark(rgba(255, 255, 255, 0.9), rgba(32, 32, 32, 0.9));
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid light-dark(rgba(255, 255, 255, 0.3), rgba(32, 32, 32, 0.3));
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 0.7rem;
  button {
    background: light-dark(#000, #fff);
    border: 0px;
    border: 4px;
    color: light-dark(#fff, #000);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    font-size: 0.7rem;
    &:hover {
      background: light-dark(#333, #eee);
    }
  }
  ul {
    margin: 0px;
    padding: 0px;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow-y: auto;
    padding: 0.8rem 0;
    scroll-snap-type: y proximity;
    li {
      list-style: none;
      display: flex;
      align-items: center;
      scroll-snap-align: center;
    }
  }
}
nav:has(+ #toggle-menu-button #toggle-menu:checked) {
  display: none;
}

#filename-holder {
  opacity: 0.2;
  padding: 0.5rem 1rem;
  text-align: center;
  transition: opacity 0.2s ease-in-out;
  &:hover {
    opacity: 1;
  }
  input {
    font-size: 1rem;
    font-family: var(--font-family);
    border: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    background: none;
    &&:focus {
      outline: none;
    }
  }
}

#filename-holder:has(
  + focus-editor + nav + #toggle-menu-button #toggle-menu:checked
) {
  visibility: hidden;
  @media only screen and (max-width: 768px) {
    display: none;
  }
}

#toggle-menu-button {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 10px;
  padding: 0;
  height: calc(var(--nav-height) + 2px);
  label {
    background: light-dark(#ccc, #555);

    color: transparent;
    text-indent: -100vw;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    @media (hover: hover) {
      &:hover {
        background: light-dark(#aaa, #666);
        cursor: pointer;
      }
    }
  }
  input {
    opacity: 0;
  }
}

focus-editor {
  padding: 1rem;
  height: calc(100% - 3rem);
  width: calc(100% - 2rem);
  max-width: 60rem;
  margin: 0 auto;
  .block:last-child {
    margin-bottom: calc(50vh - var(--nav-height));
  }
}
.focus-editor {
}

/**
 * Reverse the menu to the the top for touch devices,because the menu is at the bottom
 */
@media (pointer: coarse) {
  main {
    position: relative;
    min-height: 100%;
  }
  #filename-holder {
    position: absolute;
    bottom: 0;
    width: calc(100% - 2rem);
  }
  #toggle-menu-button,
  nav {
    top: 0;
  }
  focus-editor:has(+ nav + #toggle-menu-button #toggle-menu:not(:checked)) {
    .block:first-child {
      margin-top: var(--nav-height);
    }
  }
}

@media (pointer: coarse) {
  html {
    font-size: 22px;
  }
}

@media (pointer: coarse) {
  html {
    font-size: 22px;
  }
}

@media (pointer: coarse) and (max-width: 768px) {
  html {
    font-size: 18px;
  }
}