masks_without_hover.scss

/* -> If a card is EVER a .masked-container, it MUST ALWAYS be a .masked-container,
      because this fucks w the z-indexes.
   -> The styling of .masked MUST be predicated upon the presence of a .mask
   -> .mask is assumed to have a saturated background-color to be legible under white text */
.masked-container {
  /* positioned above the container so that children w a negative z-index are also above the container */
  z-index: 1;
  /* don't take clicks, so that negative z-index child can be clicked */
  pointer-events: none;
  /* all descendants */
  * {
    /* neutral z-index unless otherwise declared */
    z-index: 0;
    /* take clicks as normal unless otherwise declared */
    pointer-events: auto;
  }

  .mask {
    /* initial state: neutral z-index and let clicks fall through */
    position: relative;
    z-index: 0;
    pointer-events: none;
  }
  .mask ~ .masked {
    /* initial state: negative z-index (below both .mask and containing card), and clear */
    position: relative;
    z-index: -1;
    opacity: 0;
    /* dont allow any descendant elements to be clicked through the .mask */
    &:not(:focus) * { pointer-events: none; }
  }
  /* first click lands on .masked */
  .mask ~ .masked:focus,
  .mask ~ .masked:focus-within {
    /* masked is subsequent to .mask so with the same neutral z-index, .masked is on top */
    position: relative;
    z-index: 0;
    /* fade in visually */
    opacity: 1;
    transition: opacity .4s ease .1s;
    /* allow clicks on blank areas to fall through to the .mask */
    pointer-events: none;
    /* allow descendant elements to take clicks like normal */
    * { pointer-events: auto; }
  }
  /* second click (if not on a child of masked) will land on .mask again */
  &:focus-within {
    /* when masked is focused, allow mask to take pointer events for toggling */
    .mask:not(:focus) { pointer-events: auto; }
  }
  /* subsequent clicks will toggle between .masked and .mask, until focus lands
     somewhere outside of a-post-card, which resets to the initial state */


  /* all subsequent sblings of .mask which are not themselves .masked */
  .mask ~ *:not(.masked) {
    /* resting state is .mask in front so text should be white */
    color: white;
    .timestamp { color: white; }
    /* blank areas in the margin should allow clicks to fall through */
    pointer-events: none;
    /* but all the children (author handle, timestamp, etc) should still be clickable */
    * { pointer-events: auto; }
  }
  /* when .mask is present and .masked is focused,
     all subsequent siblings of .masked should have their initial colors */
  .mask ~ .masked:focus ~ *,
  .mask ~ .masked:focus-within ~ * {
    color: initial;
    .timestamp { color: $purple-blue; }
  }
}