// <form data-element="popup">
//   <div class="field"><input type="text"></div>
//   <div class="actions"><button>Done</button></div>
// </form>

[data-element="popup"]
  width: 360px
  text-align: start
  line-height: 1.5
  color: #666
  background: #f8f8f8
  border: 1px solid #ccc
  border-radius: 2px
  box-shadow: 0 0 6px #ddd
  transform: translate(-50%, -100%)
  padding: 8px
  z-index: 10000
  position: absolute
  top: 0
  left: 50%

  &[data-position~="top"][data-position~="left"]
    transform: translate(0, -100%)
    left: auto
    right: 0

  &[data-position~="middle"][data-position~="left"]
    transform: translate(0%, -50%)
    left: 0

  &[data-position~="top"][data-position~="right"]
    transform: translate(0, -100%)
    left: 0

  &[data-position~="middle"][data-position~="center"]
    transform: translate(-50%, -50%)
    left: 50%
    top: 50%

  & > .field
    line-height: 1.25

    &:not(.hidden) ~ .field
      margin-top: 8px

    & + .actions
      margin-top: 9px

    & > input[type="text"],
    & > textarea,
    & > select
      flex: 1

    label,
    &.note
      font-size: .9em
      padding: 0 2px

    label
      display: block
      padding-top: 2px
      padding-bottom: 1px
      transform: translateY(-2px)

      .tip
        opacity: .6

  & > .title
    background: #eee
    padding: 3px 10px
    margin: -8px -8px 0

  & > .actions
    display: flex
    background: #e0e0e0
    border-radius: 0 0 2px 2px
    margin: -8px -8px -8px
    overflow: hidden

    & > button,
    & > .button
      width: 0 // to force equal widths
      flex: 1
      color: #666
      background: #eee
      border: none
      border-radius: 0
      margin-left: 1px

      &:first-child
        margin-left: 0

      &[data-action]:before
        margin-left: -.5rem
        margin-right: .75rem

      &[data-action="ok"]:before
        content: "✓"

      &[data-action="cancel"]:before
        content: "✘"

[data-element="popup-container"]
  position: relative
