/*
 * The Samples block (src/Blocks/Samples.php), as the boards Demo-Transom-Swatches and -Swatches-Mobile draw it: the
 * link under an option's values (`sm`, semibold, a box before it, in the link role as the option guide's link is),
 * and the sheet. In a dialog (resources/front/dialog.css) the sheet stands at the end of the screen, the screen's
 * height and 32.5rem wide, over the dimmed page, entering from the side; on a phone it rises from the bottom to 4rem
 * under the top, its top corners rounded. Its body scrolls between the head and the foot. On a page it is a panel
 * in the content, at its full height. A tile is a checkbox over a square picture and the value's name: its frame and
 * check turn `contrast` when it is chosen, and at the limit the tiles not chosen are dimmed and disabled.
 */
.lanternwp-samples__open {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  min-block-size: 1.5rem;
  margin-block-start: var(--wp--preset--spacing--20);
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--contrast);
  font: inherit;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--wp--custom--link--underline-rest);
  text-underline-offset: var(--wp--custom--link--underline-offset);
  cursor: pointer;
  transition: text-decoration-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);

  /* A text button in the link role (docs/design-tokens.html#roles): its line takes the text's colour and thickens. */
  @media (hover: hover) {
    &:hover {
      text-decoration-color: currentcolor;
      text-decoration-thickness: 2px;
    }
  }
}

/*
 * The button that opens the sheet (`display` button): core's outline button, as theme.json's outline variation draws
 * it, whose own styles load only with a Buttons block on the page; its hover is the button role's (global.css).
 * (0,2,0) beats the element button's colours.
 */
.wp-block-lanternwp-samples.is-button > .lanternwp-samples__button {
  border: 1px solid currentcolor;
  background: transparent;
  color: var(--wp--preset--color--contrast);
}

/* The sheet in its dialog: from the end of the screen on a computer. */
.lanternwp-dialog.lanternwp-samples__dialog {
  inline-size: min(32.5rem, 100%);
  block-size: 100dvh;
  max-block-size: none;
  margin-block: 0;
  margin-inline: auto 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: var(--wp--preset--shadow--lg);

  @starting-style {
    opacity: 1;
    translate: 100% 0;
  }

  & .lanternwp-samples__sheet {
    block-size: 100%;
  }
}

/* From the bottom on a phone, to 4rem under the top of the screen. */
@media (width < 600px) {
  .lanternwp-dialog.lanternwp-samples__dialog {
    inline-size: 100%;
    block-size: calc(100dvh - 4rem);
    margin-block: auto 0;
    margin-inline: 0;
    border-start-start-radius: var(--wp--custom--radius--panel);
    border-start-end-radius: var(--wp--custom--radius--panel);

    @starting-style {
      translate: 0 100%;
    }

    /* The sheet's handle. */
    & .lanternwp-samples__head::before {
      content: '';
      position: absolute;
      inset-block-start: var(--wp--preset--spacing--20);
      inset-inline: 0;
      inline-size: 2.5rem;
      margin-inline: auto;
      block-size: 0.25rem;
      border-radius: 0.25rem;
      background: var(--wp--preset--color--border-strong);
    }
  }
}

.lanternwp-samples__sheet {
  --lanternwp-samples-pad: var(--wp--preset--spacing--50);
  --lanternwp-samples-tile: 6rem;

  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);

  @media (width < 600px) {
    --lanternwp-samples-pad: var(--wp--preset--spacing--40);
    --lanternwp-samples-tile: 5.75rem;
  }
}

.lanternwp-samples__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--50) var(--lanternwp-samples-pad) var(--wp--preset--spacing--40);
  border-block-end: 1px solid var(--wp--preset--color--border-subtle);
}

.lanternwp-samples__heading {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
  min-inline-size: 0;
}

.lanternwp-samples__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--lg);
}

.lanternwp-samples__meta {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
}

.lanternwp-samples__close {
  margin-block-start: calc(-1 * var(--wp--preset--spacing--10));
  margin-inline-end: calc(-1 * var(--wp--preset--spacing--20));
}

.lanternwp-samples__body {
  flex: 1 1 auto;
  min-block-size: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
  padding: var(--wp--preset--spacing--50) var(--lanternwp-samples-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lanternwp-samples__family {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  max-inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lanternwp-samples__family-name {
  float: inline-start;
  inline-size: 100%;
  margin-block-end: var(--wp--preset--spacing--20);
  padding: 0;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);

  & + * {
    clear: both;
  }
}

.lanternwp-samples__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
}

.lanternwp-samples__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
  inline-size: calc(var(--lanternwp-samples-tile) + 0.625rem);
  cursor: pointer;
}

/* The checkbox stays the control: over the picture, drawn as the boards' round check. */
.lanternwp-samples__check {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--wp--preset--spacing--10);
  inset-inline-end: var(--wp--preset--spacing--10);
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: 0;
  border: 1.5px solid var(--wp--preset--color--contrast);
  border-radius: 999px;
  background: var(--wp--custom--color--glass);
  appearance: none;
  cursor: pointer;

  &:checked {
    background: var(--wp--preset--color--contrast)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")
      center / 0.875rem no-repeat;
  }

  &:disabled {
    visibility: hidden;
  }
}

.lanternwp-samples__picture {
  display: block;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: var(--wp--preset--spacing--10);
  border: 2px solid transparent;
  border-radius: var(--wp--custom--radius--field);

  & img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: calc(var(--wp--custom--radius--field) - 4px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
  }

  .lanternwp-samples__check:checked + & {
    border-color: var(--wp--preset--color--contrast);
  }

  .lanternwp-samples__check:disabled + & img {
    opacity: 0.4;
  }
}

.lanternwp-samples__name {
  padding-inline: var(--wp--preset--spacing--10);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: var(--wp--custom--line-height--snug);

  .lanternwp-samples__check:disabled ~ & {
    color: var(--wp--custom--color--disabled);
  }
}

.lanternwp-samples__chosen {
  margin-block-start: calc(-1 * var(--wp--preset--spacing--10));
  padding-inline: var(--wp--preset--spacing--10);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--2-xs);
  line-height: var(--wp--custom--line-height--snug);
}

.lanternwp-samples__tile:has(.lanternwp-samples__check:disabled) {
  cursor: default;
}

.lanternwp-samples__foot {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--40) var(--lanternwp-samples-pad) var(--lanternwp-samples-pad);
  border-block-start: 1px solid var(--wp--preset--color--border-subtle);
  background: var(--wp--preset--color--base);

  & p {
    margin: 0;
  }
}

.lanternwp-samples__count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
}

.lanternwp-samples__meter {
  display: grid;
  grid-template-columns: repeat(var(--lanternwp-samples-limit), 1fr);
  gap: var(--wp--preset--spacing--10);
  inline-size: min(calc(var(--lanternwp-samples-limit) * 1.25rem), 10rem);

  & span {
    block-size: 0.25rem;
    border-radius: 0.25rem;
    background: var(--wp--preset--color--border-strong);
  }

  & span.is-on {
    background: var(--wp--preset--color--contrast);
  }

  /* The samples the cart holds already: taken, a step lighter than the chosen. */
  & span.is-cart {
    background: var(--wp--preset--color--muted);
  }
}

.lanternwp-samples__cart {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
}

.lanternwp-samples__full {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--xs);
  line-height: var(--wp--custom--line-height--normal);

  &[hidden] {
    display: none;
  }
}

/* The icons beside the link's and the limit's words. */
:is(.lanternwp-samples__open, .lanternwp-samples__full) svg {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
}

.lanternwp-samples__add {
  inline-size: 100%;
  min-block-size: 3.5rem;

  /* Nothing chosen, or nothing fits in the order: the boards' disabled button. (0,2,0) beats theme.json's button. */
  &:disabled {
    border-color: var(--wp--preset--color--surface-2);
    background: var(--wp--preset--color--surface-2);
    color: var(--wp--custom--color--disabled);
    cursor: not-allowed;
  }

  @media (width < 600px) {
    min-block-size: 3.25rem;
  }
}

.lanternwp-samples__status {
  font-size: var(--wp--preset--font-size--sm);

  &:empty {
    display: none;
  }

  &.is-error {
    color: var(--wp--preset--color--sale);
  }
}

.lanternwp-samples__note {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--2-xs);
  line-height: var(--wp--custom--line-height--normal);
}

/* On a page: a panel in the content, at its full height, no close button. */
.wp-block-lanternwp-samples.is-page {
  max-inline-size: 47.5rem;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border-subtle);
  border-radius: var(--wp--custom--radius--panel);

  & .lanternwp-samples__body {
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lanternwp-samples__open {
    transition: none;
  }
}