/* registered so a match's fades can ease in and out, see .ws-word */
@property --fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@layer word-smith {
  .word-smith {
    display: flex;
    flex-direction: column;
    height: 100dvh;
  }

  .ws-workspace {
    flex-grow: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .ws-controls {
    padding: 0.5rem;
    font-size: 0.95rem;

    .ws-query {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.75rem;

      label {
        color: var(--page-subdued);
      }

      input[type=text] {
        flex-grow: 1;
        min-width: 0;
        background: var(--page-bg);
        color: var(--page-hl);
        border: 0.0625rem solid var(--page-link-border);
        font-family: "Ubuntu Sans Mono", monospace;
        font-size: 1.1rem;
        letter-spacing: 0.1rem;
        padding: 0.25rem 0.5rem;
        text-transform: uppercase;
      }

      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;
        padding: 0 0.75rem;
        min-height: 1.9rem;
        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);
          }
        }
      }
    }

    .ws-errors {
      list-style: none;
      margin: 0 0 0.75rem;
      padding: 0.5rem 0.75rem;
      border-left: 0.1875rem solid var(--accent-letter-color);
      background: var(--page-link-bg);
    }

    .ws-knobs {
      border: 0.0625rem solid var(--page-link-border);
      margin-bottom: 0.75rem;
      padding: 0.25rem 0.75rem 0.5rem;

      /* the legend spans the box so the reset button can sit at the far end,
         in line with the label. a legend erases the border behind it, so it
         draws that stretch of the border itself, running right up to the
         button so the button reads as part of the border */
      legend {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0;
        color: var(--page-subdued);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
      }

      .ws-legend-label {
        padding: 0 0.25rem;
      }

      .ws-legend-rule {
        flex-grow: 1;
        border-top: 0.0625rem solid var(--page-link-border);
      }

      .ws-reset {
        margin: 0;
        padding: 0 0.35rem;
        border: 0.0625rem solid var(--page-link-border);
        background: none;
        color: inherit;
        font: inherit;
        font-size: smaller;
        letter-spacing: inherit;
        text-transform: inherit;
        cursor: pointer;

        &:hover, &:focus-visible {
          color: var(--page-link-title-fg-hover);
          background: var(--page-link-bg-hover);
        }
      }
    }

    .ws-slider {
      display: grid;
      grid-template-columns: 7rem 3rem 1fr;
      align-items: center;
      gap: 0.5rem;
      padding: 0.15rem 0;

      label {
        color: var(--page-fg);
      }

      /* a scorer's name, picked to score by it alone */
      .ws-solo {
        justify-self: start;
        margin: 0;
        padding: 0;
        border: 0;
        border-bottom: 0.0625rem dotted var(--page-link-border);
        background: none;
        color: var(--page-fg);
        font: inherit;
        cursor: pointer;

        &:hover, &:focus-visible {
          color: var(--page-link-title-fg-hover);
          border-bottom-color: var(--page-link-title-fg-hover);
        }
      }

      .ws-slider-value {
        font-family: "Ubuntu Sans Mono", monospace;
        color: var(--page-hl);
        text-align: right;
      }

      input[type=range] {
        min-width: 0;
        accent-color: var(--accent-letter-color);
      }
    }
  }

  .ws-results {
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem;
    border-top: 0.125rem solid var(--page-hl);

    .ws-results-header {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.75rem;
      color: var(--page-subdued);
      font-size: 0.85rem;
      margin-bottom: 0.5rem;

      .ws-match-count {
        color: var(--page-hl);
      }
    }

    .ws-matches {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
      gap: 0.15rem 1rem;

      li {
        border-bottom: 0.0625rem solid var(--page-link-bg);
      }

      .ws-match button {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.5rem;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        /* shaded by closeness, see match_shade_style */
        background: hsl(var(--match-hue, 0) 75% 50% / var(--match-strength, 0));
        color: inherit;
        font: inherit;
        font-family: "Ubuntu Sans Mono", monospace;
        text-align: left;
        cursor: pointer;

        &:hover, &:focus-visible {
          background: hsl(var(--match-hue, 0) 75% 50% / calc(var(--match-strength, 0) + 0.15));
        }
      }

      /* a word shows through this window without wrapping. one too wide
         for it (marked by overflow_fade_controller) fades out at the end,
         and when hovered scrolls slowly until its end reaches the edge,
         fading in its start and fading away the end's fade as it goes */
      .ws-word {
        --fade-end: 2em;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        color: var(--page-hl);
        transition: --fade-start 0.3s, --fade-end 0.3s ease-out;

        > span {
          display: inline-block;
          transition: transform 0.3s ease-out;
        }

        &[data-overflowing] {
          mask-image: linear-gradient(to right,
            transparent, black var(--fade-start),
            black calc(100% - var(--fade-end)), transparent);
        }
      }

      .ws-match button:is(:hover, :focus-visible) .ws-word[data-overflowing] {
        --fade-start: 0.75em;
        --fade-end: 0px;
        /* gets up to speed early, then holds it right to the end */
        --reveal-easing: cubic-bezier(0.2, 0, 0.6, 0.5);
        transition: --fade-start 0.3s 0.3s, --fade-end var(--reveal-duration) var(--reveal-easing) 0.3s;

        > span {
          transform: translateX(calc(-1 * var(--overflow)));
          transition: transform var(--reveal-duration) var(--reveal-easing) 0.3s;
        }
      }

      .ws-score {
        flex-shrink: 0;
        white-space: nowrap;
        color: var(--page-subdued);
        font-size: 0.85rem;
      }
    }

    .ws-empty, .ws-placeholder {
      color: var(--page-subdued);
    }

    .ws-suggestions {
      .ws-placeholder {
        margin: 0 0 0.75rem;
      }

      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .ws-suggestion {
        margin: 0;
        padding: 0.15rem 0.6rem;
        /* tinted by --word-hue, see word_cloud_controller */
        border: 0.0625rem solid oklch(var(--tint-border) var(--word-hue, 0));
        background: oklch(var(--tint-bg) var(--word-hue, 0));
        color: var(--page-hl);
        font: inherit;
        font-family: "Ubuntu Sans Mono", monospace;
        letter-spacing: 0.05rem;
        cursor: pointer;

        &:hover, &:focus-visible {
          border-color: oklch(var(--tint-border-hover) var(--word-hue, 0));
          background: oklch(var(--tint-bg-hover) var(--word-hue, 0));
        }
      }
    }
  }

  /* wide: knobs on the left, matches fill the rest */
  @media (min-width: 900px) {
    .ws-workspace {
      grid-template-columns: 24rem minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
    }

    .ws-controls {
      overflow-y: auto;
      border-right: 0.125rem solid var(--page-hl);
    }

    .ws-results {
      border-top: 0;
    }
  }
}