@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;
      a {
        margin: 0 0.25rem;
        text-decoration: none;
        color: var(--page-fg);
      }
    }
    button {
      color: var(--page-link-title-fg);
      background: var(--page-link-bg);
      border: 0;
      margin: 0 0.1rem;
      padding: 0 0.5rem;
      cursor: pointer;
      &:hover {
        color: var(--page-link-title-fg-hover);
        background-color: var(--page-link-bg-hover);
      }
    }
    .theme-toggle {
      margin: 0 0.5rem;
    }
    .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;
        }
      }
    }
  }

  .regex-workspace {
    background-color: var(--page-bg);
    width: 100vw;
    height: calc(100vh - 2rem);
  }

  .columns-container {
    display: flex;
    flex-direction: row;
    height: 100%;

    .vertical-gutter {
      background-color: var(--page-hl);
      width: 0.125rem;
      height: 100%;
      cursor: ew-resize;

      /* this bit makes the gutter grab-able a few pixels away */
      &:after {
        content: "";
        display: block;
        position: relative;
        height: 100%;
        width: 0.5rem;
        left: -0.2rem;
        z-index: 10;
      }
    }
  }

  .regex-column {
    display: flex;
    flex-direction: column;
    width: calc(50% - 0.0625rem);
    height: 100%;
    min-width: 10rem;

    .horizontal-gutter {
      background-color: var(--page-hl);
      height: 0.125rem;
      width: 100%;
      cursor: ns-resize;

      /* this bit makes the gutter grab-able a few pixels away */
      &:after {
        content: "";
        display: block;
        position: relative;
        height: 0.5rem;
        width: 100%;
        top: -0.125rem;
        z-index: 10;
      }
    }

    .regex-pane {
      height: calc(50% - 0.0625rem);
      width: 100%;
      min-height: 4rem;
    }
  }

  .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);
    }
  }

  .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;
    }
  }
}