Aktueller Stand
===============

body
  up-overlays
    up-overlay[mode=modal]       # full screen, catches clicks
      up-overlay-backdrop        # backdrop (optional), only for visuals
      up-overlay-viewport        # scroll bars
        up-overlay-box         # padding
          up-overlay-dismiss     # dismiss icon
          up-overlay-content     # pure content
    up-overlay[mode=popup]
      up-overlay-box
        up-overlay-dismiss
        up-overlay-content


.up-layer statt up-overlay
===========================

Pro: Kürzer
Con: Body müsste auch .up-layer[mode=root] kriegen um logisch zu sein.
Pro: Damit wären dann auch lookups schneller.
Con: Nur Overlays stylen wär dann die Regel: .up-layer:not([mode=root])

body.up-layer[up-mode=root]
  up-overlays
    .up-layer[mode=modal]       # full screen, catches clicks
      .up-layer-backdrop        # backdrop (optional), only for visuals
      .up-layer-viewport        # scroll bars
        .up-layer-box         # padding
          .up-layer-dismiss     # dismiss icon
          .up-layer-content     # pure content
    .up-layer[mode=popup]
      .up-layer-box
        .up-layer-dismiss
        .up-layer-content


.overlays-Container loswerden
=============================

Gleiche Pros und Cons wie oben
Und ein Element weniger

body.up-layer[up-mode=root]
.up-layer[mode=modal]       # full screen, catches clicks
  .up-layer-backdrop        # backdrop (optional), only for visuals
  .up-layer-viewport        # scroll bars
    .up-layer-box         # padding
      .up-layer-dismiss     # dismiss icon
      .up-layer-content     # pure content
.up-layer[mode=popup]
  .up-layer-box
    .up-layer-dismiss
    .up-layer-content


Refactor auf Custom Element
===========================

Pro: netteres HTML! Aus <div class="overlay" mode="modal"> with <up-overlay mode="modal">

up-overlay[mode=modal]       # full screen, catches clicks
  up-overlay-backdrop        # backdrop (optional), only for visuals
  up-overlay-viewport        # scroll bars
    up-overlay-box         # padding
      up-overlay-dismiss     # dismiss icon
      up-overlay-content     # pure content
up-overlay[mode=popup]
  up-overlay-box
    up-overlay-dismiss
    up-overlay-content
