@layer template, base;
@import url("https://codepen.io/Miss-Fox/pen/qEBNWaj.css") layer(template);

@layer base {
  :root {
    --clr-bg-base: light-dark(
      var(--clr-neutral-10, oklch(97% 0 0)),
      var(--clr-neutral-900, oklch(15% 0.02 280))
    );
    --clr-bg-body: linear-gradient(
      0deg,
      var(--clr-bg),
      var(--clr-surface-secondary)
    );
    --clr-text-base: light-dark(
      var(--clr-neutral-900, oklch(15% 0.02 280))
        var(--clr-neutral-0, oklch(100% 0 0))
    );
    --clr-accent-base: light-dark(oklch(64% 0.16 303), oklch(47% 0.23 6));

    --ff-400: "Karla";
    --ff-700: "Jost";

    --default-max-inline-size: 80ch;
  } /* END @root */

  .wrapper {
    display: grid;
    gap: var(--spacing-100, 1em);

    @media (width > 700px) {
      gap: var(--spacing-200, 2em);
      grid-template-columns:
        minmax(min(100%, (var(--default-max-inline-size) / 2) * 0.75ch), 0.75fr)
        minmax(
          min(100%, (var(--default-max-inline-size) / 2) * 1.25ch),
          1.25fr
        );
      grid-template-areas:
        "title title"
        "card controls"
        "carousel carousel";
      header {
        grid-area: title;
      }
      .card {
        grid-area: card;
        /* align-self: end;*/
      }
      .controls {
        grid-area: controls;
        align-self: end;
      }
      .carousel-wrapper {
        grid-area: carousel;
      }
    } /* END @media */
  } /* END .wrapper */

  code {
    display: inline-block;
    font-size: 0.9em;
  }

  h1 {
    text-align: center;
  }
  /* .size {
    container-type: size;
  } */

  .shape {
    aspect-ratio: 1;
    background-color: var(--clr-accent, hotpink);
    clip-path: var(--_shape-clip-path);
  }

  .output-wrapper {
    display: grid;
    gap: var(--spacing-025, 0.25em);
  }

  @container (width > 20ch) {
    .output-wrapper {
      display: flex;
      align-items: start;
      gap: var(--spacing-025, 0.25em);
      margin-block-start: var(--spacing-050, 0.5em);
    }
  } /* END @container */

  output {
    max-inline-size: 100cqi;

    & code {
      margin-block-start: var(--spacing-050, 0.5em);
      white-space: pre-wrap;
      /* word-break: break-all; */
      font-size: clamp(0.9rem, 1rem + (-1 * 3cqb), 1.1rem);
    } /* END & code */
  } /* END output */

  .controls-wrapper {
    display: grid;
    gap: var(--spacing-100, 1em);
    justify-content: center;
    grid-template-columns: 1fr;

    @container (width > 40ch) {
      grid-template-columns: repeat(2, 1fr);
    } /* END @container */

    &
      :is(
        .custom-select:has([data-field="cp1Origin"], [data-field="cp2Origin"]),
        button.btn-add_path:not(:has(+ .btn-reset)),
        :is(.input-wrapper, .custom-select):has([data-field]):is(
            :nth-child(odd)
          ):has(+ .btn),
        .custom-select:has([id="select-command"]):not(
            :has(
              + .custom-select [id="select-coor-opt"],
              + .custom-select [data-field="fill-rule"]
            )
          )
      ) {
      grid-column: 1 / -1;

      &:is(.input-wrapper:has([data-field]):is(:nth-child(odd)):has(+ .btn))
        label.custom-input {
        flex-grow: 1;
      } /* END &:is(input-wrapper) */
    } /* END:is .btn-add_path:not() */
  } /* END controls-wrapper */

  .input-wrapper label {
    flex-grow: 1;
  }

  :is(.custom-input, .custom-select)
    .label
    + :is(input, select):nth-last-child {
    margin-block-start: var(--spacing-025, 0.25em);
  }

  .select-unit,
  [data-field="fill-rule"] {
    field-sizing: content;
  }

  details.list-wrapper {
    position: fixed;
    top: var(--_list-wrapper-top, var(--spacing-200, 2em));
    left: var(--_list-wrapper-left, auto);
    right: var(--_list-wrapper-right, var(--spacing-200, 2em));
    bottom: var(--_list-wrapper-bottom, auto);

    background-color: var(--clr-surface-primary);
    border: var(--default-border);
    border-radius: var(--default-br, 0.25em);
    box-shadow: var(--default-shadow);
    overflow: clip;
    max-block-size: 40vh;
    max-block-size: 40vb;
    max-inline-size: calc((var(--spacing-050, 0.5em) * 2) + 30ch);
    overflow-y: auto;

    & summary {
      touch-action: none;
      padding: var(--spacing-025, 0.25em) var(--spacing-050, 0.5em);
      background-color: var(--clr-surface-secondary);
      text-transform: uppercase;
      cursor: grab;
      position: sticky;
      top: 0;
    }

    & summary:active {
      user-select: none;
      cursor: grabbing;
    }

    & summary::marker {
      cursor: initial;
    }

    & .path-list {
      padding: var(--spacing-025, 0.25em) var(--spacing-050, 0.5em);
      inline-size: min(100%, 30ch);
    }

    & .path-item {
      display: grid;
      gap: var(--spacing-025, 0.25em);
      grid-template-columns: 1fr auto;

      &:is(.action_edit) [data-action="edit"] {
        color: var(--clr-accent-secondary, hotpink);
      }
    }

    & .actions {
      margin-inline-start: auto;
    }

    & .btn-action {
      padding: var(--spacing-025, 0.25em);
      filter: opacity(80%);
      transition: filter var(--default-trans-dur, 0.4s)
        var(--default-easing, ease);

      &:is([disabled]) {
        filter: opacity(20%);
        cursor: not-allowed;
      }
    }

    & .btn-action:is(:hover, :focus-visible):not([disabled]) {
      filter: opacity(100%);
    }
  } /* END details.list-wrapepr */

  .carousel-wrapper {
    overflow: clip;
    min-width: 0; /* this was the magic prop that allowed the overflow as a grid child (instead of making the minmax col grow */
  }

  .btn-preset {
    padding: var(--spacing-025, 0.25em) var(--spacing-050, 0.5em);

    &::after {
      content: "";
      display: block;
      background-color: var(--clr-accent);
      clip-path: var(--_preset-preview);
      aspect-ratio: 1;
      inline-size: 2ch;
    }
  }

  .carousel-wrapper ul {
    display: grid;
    grid-auto-flow: column;
    gap: var(--spacing-100, 1em);
    align-items: center;
    max-width: 100%;

    overflow-x: auto;
    scroll-snap-type: x proximity;

    &::-webkit-scrollbar {
      display: none;
    }

    & > li {
      scroll-snap-align: center;
      width: 100cqi;
    }

    & li a {
      text-decoration: underline;
      text-underline-offset: 0.2em;
      text-decoration-thickness: 0.1em;
    }

    & li:has(.preset-details) {
      text-align: initial;
    }
  } /* END carousel-wrapper ul */

  @supports selector(::scroll-marker-group) {
    .carousel-wrapper {
      padding-block-end: var(--spacing-150, 1.5em);
      position: relative;
    }
    .carousel-wrapper ul::scroll-marker-group {
      display: flex;
      place-items: center;
      gap: var(--spacing-025, 0.25em);
      position: absolute;
      left: 50%;
      bottom: 0.5em;
      transform: translateX(-50%);
    }

    .carousel-wrapper ul {
      scroll-marker-group: after;

      & li::scroll-marker {
        content: "";
        background-color: var(--clr-surface-tertiary, hotpink);
        width: 1ch;
        height: 1ch;
        aspect-ratio: 1;
        border-radius: 50%;
        color: inherit;
      }

      & li::scroll-marker:target-current {
        background-color: currentColor;
      } /* END target-current */
    } /* END carousel-wrapper ul */
  } /* END @supports */
} /* END @layer */