@layer regex {
  .regex-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 2rem;

    .regex-title {
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      a {
        margin: 0 0.25rem;
        text-decoration: none;
        color: var(--page-link-title-fg);
        svg {
          width: 1.4rem;
          height: 1.4rem;
          padding-bottom: 0.15rem;
          fill: var(--page-link-title-fg);
        }
      }

      .regex-title-text-short {
        display: none;
      }
      .regex-title-text-long {
        display: none;
      }

      @media (min-width: 520px) {
        .regex-title-text-short {
          display: inline;
        }
      }

      @media (min-width: 1280px) {
        .regex-title-text-short {
          display: none;
        }
        .regex-title-text-long {
          display: inline;
        }
      }
    }
    button {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
      color: var(--page-link-title-fg);
      background: var(--page-link-bg);
      border: 0;
      margin: 0 0.1rem;
      padding: 0 0.5rem;
      min-height: 1.7rem;
      cursor: pointer;
      svg {
        width: 1.25rem;
        height: 1.25rem;
        fill: var(--page-link-title-fg);
      }
      &:hover {
        color: var(--page-link-title-fg-hover);
        background-color: var(--page-link-bg-hover);
        svg {
          fill: var(--page-link-title-fg-hover);
        }
      }
      .label {
        display: none;
      }

      @media (min-width: 1050px) {
        .label {
          display: inline;
        }
      }
    }
    .theme-toggle {
      margin: 0 0.5rem;
      color: var(--page-subdued);
      svg {
        width: 1.35rem;
        height: 1.35rem;
        fill: var(--page-subdued);
      }
    }
    .regex-toggles {
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      align-items: baseline;
      .regex-toggle {
        margin: 0 0.5rem;

        .flag-letter {
          color: var(--accent-letter-color);
          font-weight: bold;
          font-style: italic;
          font-size: 1.4rem;
        }
      }

      .lines-toggle {
        display: none;
      }

      .regex-toggle-short {
        display: inline;
      }
      .regex-toggle-long {
        display: none;
      }

      @media (min-width: 460px) {
        .lines-toggle {
          display: inline;
        }
      }

      @media (min-width: 860px) {
        .regex-toggle-short {
          display: none;
        }
        .regex-toggle-long {
          display: inline;
        }
      }
    }
  }

  .regex-workspace {
    background-color: var(--page-bg);
    display: grid;
    width: 100%;

    .regex-pane {
      min-width: 0;
      min-height: 0;
    }

    .vertical-gutter, .horizontal-gutter {
      background-color: var(--page-hl);

      /* this bit makes the gutters grab-able a few pixels away */
      &:after {
        content: "";
        display: block;
        position: relative;
        z-index: 10;
      }
    }

    .vertical-gutter {
      cursor: ew-resize;
      &:after {
        height: 100%;
        width: 0.5rem;
        left: -0.2rem;
      }
    }

    .horizontal-gutter {
      cursor: ns-resize;
      &:after {
        height: 0.5rem;
        width: 100%;
        top: -0.125rem;
      }
    }
  }

  /* narrow: one column in source order (pattern, haystack, results, match),
     no draggable splits, the page itself scrolls */
  @media (width < 800px) {
    .regex-workspace {
      .vertical-gutter, .horizontal-gutter {
        display: none;
      }

      .regex-pane + .regex-pane {
        border-top: 0.125rem solid var(--page-hl);
      }

      .pattern-pane, .input-data-pane {
        height: 20rem;
      }
      .match-pane, .results-pane {
        min-height: 6rem;
        max-height: 30rem;
        overflow: scroll;
      }
    }
  }

  /* wide: quadrants, with both splits draggable. --split-x/--split-y are set by
     the resizable-panes controller; unset it's an even 50/50 split. */
  @media (width >= 800px) {
    .regex-workspace {
      height: calc(100dvh - 2rem);
      grid-template-columns: var(--split-x, 1fr) 0.125rem 1fr;
      grid-template-rows: var(--split-y, 1fr) 0.125rem 1fr;
      grid-template-areas:
        "pattern . haystack"
              ". . ."
          "match . results";

      .pattern-pane {
        grid-area: pattern;
      }
      .input-data-pane {
        grid-area: haystack;
      }
      .match-pane {
        grid-area: match;
      }
      .results-pane {
        grid-area: results;
      }

      /* placed by line number rather than area so the two can cross */
      .vertical-gutter {
        grid-area: 1 / 2 / -1 / 3;
      }
      .horizontal-gutter {
        grid-area: 2 / 1 / 3 / -1;
      }
    }
  }

  .pattern-pane, .input-data-pane {
    .field_with_errors {
      height: 100%;
    }

    textarea {
      width: 100%;
      height: 100%;
      resize: none;
      border: 0;
      padding: 0.5em;
      scrollbar-width: thin;
      scrollbar-color: var(--page-ll) var(--page-bg);

      &:focus-visible {
        outline: none;
      }
    }
  }

  .regex-match {
    background-color: var(--match-bg);
    color: var(--match-fg);
  }

  .match-pane, .results-pane {
    padding: 1rem 1rem;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--page-ll) var(--page-bg);
  }

  .results-pane {
    ol.regex-results-list {
      li {
        cursor: pointer;

        &:hover, &.selected {
          background-color: var(--page-ll);
        }
      }
    }
  }

  .match-pane {
    dl {
      display: grid;
      grid-template-columns: 1fr 2fr;
    }

    dt {
      font-family: "Ubuntu Sans Mono", monospace;
      text-align: center;
      code {
        color: var(--page-fg);
        background: var(--page-ll);
        padding: 0 0.25rem;
      }
    }

    dd {
      grid-column-start: 2;
    }
  }
}