/* The books: a business's section, in its color. */

@layer components {
  /* Each business's section is drawn like the venue's window ("la
     ventanilla"): a solid black awning with its name in spaced capitals, a
     thick black frame, and a white sill underneath. The awning is in the
     business color. */
  .business {
    --frame: 7px;
    --overhang: 12px;
    position: relative;
    margin: 2.75rem 0 2.5rem;
    border: var(--frame) solid var(--ink);
    border-top: 0;
    background: var(--paper);

    @media (max-width: 640px) { --overhang: 6px; --frame: 5px; }

    > table { margin-bottom: 0; }
    > p { margin: 0; padding: 1rem 1.2rem; }

    /* The sill: a white ledge outlined in black, wider than the frame. */
    &::after {
      content: "";
      position: absolute;
      left: calc(-1 * (var(--frame) + var(--overhang)));
      right: calc(-1 * (var(--frame) + var(--overhang)));
      bottom: calc(-1 * var(--frame) - 14px);
      height: 14px;
      background: var(--paper);
      border: 2px solid var(--ink);
      box-shadow: 0 3px 0 var(--ink);
    }

    /* A strip of the business color on the left of each of its rows, between
       the window frame and a thin black line, so a white business shows as
       white, not as nothing. */
    tbody tr td:first-child:not(.grip) {
      box-shadow: inset 5px 0 0 var(--biz), inset 6.5px 0 0 var(--ink);
      padding-left: 1.2rem;
    }

    /* In lists that can be reordered (products, supplies), the strip is a
       wider column of its own: the grip. Where the viewer may reorder, it's
       the handle: dotted in the business's text color, move cursor, focusable
       (arrow keys move the row). */
    tbody td.grip {
      width: 1.5rem;
      padding: 0;
      background-color: var(--biz);
      box-shadow: inset -1.5px 0 0 var(--ink);

      &.handle {
        cursor: move;
        touch-action: none;
        background-image:
          radial-gradient(circle, var(--biz-text) 1.4px, transparent 1.9px);
        background-size: 7px 7px;
        background-position: center;

        &:hover, &:focus-visible { background-size: 6px 6px; }
        &:focus-visible { outline-offset: -3px; }
      }
    }
  }
  .grip-col { width: 1.5rem; }

  /* The awning, in the business color: slightly wider than the window, its
     face sloping outward. Two clipped layers draw it: black underneath, the
     color 2px inside, so the black shows as an outline (a white business still
     shows on the white page). */
  .business-tag {
    position: relative;
    isolation: isolate;
    margin: 0 calc(-1 * (var(--frame) + var(--overhang)));
    padding: 0.9rem 4rem;
    color: var(--biz-text);
    font: 700 1rem/1.2 var(--font-body);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;

    @media (max-width: 640px) { padding: 0.7rem 1rem; }

    &::before, &::after {
      content: "";
      position: absolute;
      z-index: -1;
      clip-path: polygon(
        var(--overhang) 0, calc(100% - var(--overhang)) 0, 100% 100%, 0 100%);
    }
    &::before { inset: 0; background: var(--ink); }
    &::after { inset: 2px; background: var(--biz); }
  }
}