html
  box-sizing: border-box
*, *:before, *:after
  box-sizing: inherit

.hidden
  display: none !important

[class^=btn--]
  cursor: pointer

.st-block
  margin-right: $control-width


label
  .st-icon
    font-size: 41px
    vertical-align: middle
    margin-right: $quarter-spacing

.st-outer
  margin-bottom: $double-spacing * 4

.st-outer--is-reordering
  .st-block.st-drag-over,
  .st-block.st-drag-over:last-child,
  .st-block

    &::after
      display: block
      content: "Drop block here"
      padding: .7em 0
      height: $base-spacing
      color: $c-highlight
      background: $c-white
      font-size: x-small
      font-family: inherit
      text-align: center

.st-text-block,
.st-text-block:active,
.st-text-block:focus,
.st-block [contenteditable="true"],
.st-block [contenteditable="true"]:active,
.st-block [contenteditable="true"]:focus,
.st-block input[type="text"],
.st-block input[type="text"]:active,
.st-block input[type="text"]:focus,
.st-block textarea,
.st-block textarea:hover,
.st-block textarea:active
  border: 1px solid $c-smoke

// blocks: @extends all the typographic styles used in the articles

.st-text-block
  @extend .article-block--text
  min-height: $text-line-height


.st-block--heading
  @extend .article-block--heading

.st-block--quote,
.st-block--extended-quote
  @extend .article-block--quote

.st-block--divider
  @extend .article-block--divider

.st-block
  &.bodywidth,
  &.fullwidth
    .media__img
      width: 100%

  .media__img
    width: $small-media-width

  aside
    font-size: x-small
    font-style: italic
    line-height: 1.2
    margin-bottom: 0
    padding-bottom: 0
    padding-top: 8px
    text-align: right
    word-break: break-all

.st-block-is-note
  margin-left: -1px
  padding-left: 0

.st-block.st-block-is-note .st-block__inner
  top: 0

.st-block__ui,
.st-block__ui-delete-controls,
.st-block__control-ui
  position: absolute
  bottom: 0
  right: 0
  opacity: 0

.st-block__control-ui
  right: auto
  left: 0

.st-active-block
  .st-block__ui,
  .st-block__control-ui
    margin-bottom: 0
    margin-right:  0
    opacity: 1
    z-index: 1

.st-block__inner
  position: relative
  padding: 0

.st-block--with-errors,
.st-block--delete-active
  &.st-block input[type="text"],
  .st-text-block,
  &.st-block textarea
    background: mix($c-negative, $c-white, 20%)
    border: 1px solid $c-negative

.st-block--delete-active
  .st-block__ui-delete-controls
    opacity: 1
    z-index: 2

.st-block-controls
  display: none
  padding: $half-spacing 0 0
  margin: $base-spacing 0
  flex-wrap: wrap
  justify-content: flex-start
  align-items: stretch
  text-align: center

.st-block-controls--active
  display: flex

.st-block-control
  @extend .btn
  flex: 1 1 auto
  transition: background-color $transition-duration $easeOutExpo, color $transition-duration $easeOutExpo
  font-size: 14px
  margin: 0 2px 2px 0
  padding: $half-spacing
  background: $c-smoke
  color: $c-text
  line-height: 1

  &:hover,
  &:focus
    background-color: $c-highlight
    color: $c-white

  .st-icon
    display: block
    margin: 0 auto .2em
    font-size: 4em

.st-block-controls__top
  display: none

  &::before
    display: none

.st-spinner
  // !important because there’s inline css screwing this
  position: absolute!important
  left: 50%
  top: 50%
  z-index: 2

.st-block__ui
  // left: 101%
  right: -$control-width
  // right: auto
  bottom: auto
  top: 0
  width: $control-width - 2rem
  background-color: $c-smoke

.st-format-bar
  position: absolute
  margin: -3em 0 0
  opacity: 0
  visibility: hidden
  z-index: 10
  padding: .5em .9em
  border-radius: 1px
  background-color: $c-text

  &::before
    content: ''
    display: block
    position: absolute
    left: 50%
    top: 2.7em
    width: 0
    height: 0
    border: .625em solid transparent
    border-top-color: $c-text
    border-bottom: 0
    margin-left: -.625em

.st-format-bar--is-ready
  visibility: visible
  opacity: 1

.st-block__inputs
  padding: 1.6em 0 1em
  border-radius: .2em
  border-top: .125em solid transparent

  .st-drag-over &
    border-top-color: $c-gray-medium

.st-block
  padding: 0
  position: relative
  margin-bottom: $half-spacing

  .st-block__inputs
    padding-bottom: 0
    background-color: transparent

    input[type='text']
      padding: $base-spacing $half-spacing!important
      width: 100%!important
      border-color: $c-white!important

  .st-block__paste-input
    text-align: center
    width: 80%
    display: block
    margin: 0.4em auto 0

.st-html-block
  border: 1px solid $c-smoke
  background-color: $c-smoke
  width: 100%
  padding: $half-spacing
  margin: 0 0 2px

.st-block input[type="text"],
.st-text-block,
.st-block textarea
  width: 100%
  padding: $half-spacing
  margin: 0 0 2px
  border: 1px solid $c-smoke
  background-color: $c-smoke
  font-size: inherit

  &:active,
  &:focus
    padding: $half-spacing
    border: 1px solid $c-gray-medium!important
    outline: none

.st-definition
  dt
    padding-left: 0
    padding-right: 0
    font-weight: bold
    font-style: normal

  dd
    padding: $half-spacing
    font-weight: normal
    font-style: normal

.st-block.st-block-is-note .st-block__inner
  margin: 0

// annotations
.st-block-is-note
  &::before
    float: none
    position: absolute
    left: -50px
    top: 0

  .st-block__inner
    background-color: transparent
    margin: 0
    padding: 0

  .st-text-block
    background-color: $c-smoke

.st-format-btn
  min-width: $base-spacing * 1.7
  min-height: $base-spacing * 1.7
  padding: 0 .6em 0 0
  margin: 0 .6em 0 0
  border: 0
  border-right: 1px solid $c-dark-grey
  background: transparent
  color: $c-white
  vertical-align: middle

  &:last-child
    border-right: none
    padding-right: 0
    margin-right: 0

.st-format-btn--Italic
  font-style: italic

.st-format-btn--Unlink
  text-decoration: line-through

.st-format-btn:hover,
.st-format-btn:focus,
.st-format-btn--is-active
  color: $c-highlight

.st-input-label
  @extend .hidden

.st-block__upload-container
  margin: .4em 0 0
  text-align: center
  position: relative

  input[type="file"]
    position: absolute
    left: 0
    width: 100%
    height: 100%
    padding: 7px 0
    z-index: 50
    opacity: 0
    cursor: pointer
    text-align: center

.st-upload-btn
  position: relative
  padding: .35em 1em
  border-radius: 0
  border: 0
  background: #42474B
  font-size: 1.125em
  cursor: pointer
  color: $c-white
  z-index: 10

  .st-block__upload-container:hover &,
  .st-block__upload-container:focus &
    color: $c-white
    background: $c-highlight

.st-block__dropzone
  .st-icon
    display: block
    margin: 0 auto 0.2em
    font-size: 4em
    color: #42474B
    text-align: center

  p
    text-align: center
    color: #42474B
    font-size: 1.2em
    margin: 0

    span
      font-weight: 700

.st-block__editor--with-sixteen-by-nine-media,
.st-block__editor--with-square-media
  padding-top: 100%
  height: 0
  position: relative
  width: 100%

  video,
  iframe
    position: absolute
    height: 100%
    width: 100%
    left: 0
    top: 0

.st-block__editor--with-sixteen-by-nine-media
  padding-top: 56.25%

.st-block__editor
  img
    display: block
    width: 100%
    height: auto

//  errors next to failed block
.st-block__messages
  display: none
  position: relative
  max-width: 100%
  top: 0
  left: 0
  padding: $half-spacing $base-spacing
  color: $c-negative
  background: $c-smoke
  text-align: center

  span
    display: block

.st-block__messages--is-visible
  display: block

.st-msg--error
  color: $c-white

// errors listed at top of form
.st-errors
  margin-bottom: $base-spacing
  padding: $base-spacing
  color: $c-negative
  background-color: $c-smoke

  ul,
  p
    margin: 0

  li
    margin-bottom: 0!important

.st-block--with-errors
  .st-block__messages
    border: 2px solid $c-negative

.with-st-controls
  &:after,
  &:before
    display: none

.st-icon--add
  &::after
    display: none

.st--block-limit-reached
  .st-block--with-plus
    &::after
      display: none

.st-box-info,
.st-autoload-info
  position: relative
  padding: 14px 46px 0 14px
  margin-bottom: $text-line-height
  font-weight: 200
  text-transform: uppercase
  font-size: 14px
  line-height: 1.5
  color: $st-autosave-color
  border: 1px solid

.st-box-discard-button,
.st-autoload-discard-button
  color: inherit
  display: inline-block
  border: 1px solid
  padding: 5px 14px 0 14px
  margin-bottom: 15px
  margin-top: 10px
  font-size: 14px

.st-box-close-button,
.st-autoload-close-button
  display: inline-block
  position: absolute
  right: 0
  top: 0
  width: $text-line-height
  height: $text-line-height
  color: inherit
  border-left: 1px solid
  border-bottom: 1px solid
  text-align: center
  font-size: 24px

  [class^='icon--']
    vertical-align: top


// buttons

.btn
  padding: $half-spacing
  transition: color $transition-duration $easeOutExpo, border-color $transition-duration $easeOutExpo

  &:active
    box-shadow: none

[class^='btn--']
  @extend .btn

.btn--editor-panel,
.btn--editor-panel--delete
  display: block
  margin-bottom: -1px
  padding-left: $half-spacing
  color: $c-text
  border-radius: 0
  text-align: left
  border-bottom: 1px solid $c-light-grey

  [class^='icon--']
    margin-right: $half-spacing
    min-width: 1em
    font-size: 1.4em

  &:not(.btn--with-rocker)
    &:hover,
    &:active
      z-index: 10
      color: $c-white
      background-color: $c-highlight
      border-bottom-color: $c-highlight

.st-block__ui-delete-controls
  display: flex
  flex-wrap: wrap
  align-items: flex-start
  left: 0
  top: 0
  background-color: $c-negative
  cursor: default
  line-height: 1

  [class^='btn']
    flex: 50%
    padding: $half-spacing 0
    border-radius: 0
    border: 0
    text-align: center
    color: mix($c-white, $c-negative, 60%)

    &:hover, &:focus
      background-color: none
      color: $c-white

  [class^='icon--']
    display: block
    margin: 0 auto .2em
    font-size: 4rem

.st-block__delete-label
  flex: 1 0 auto
  order: 1
  margin: $base-spacing 0
  // color: $c-white
  cursor: default
  text-align: center
  border: 2px solid #d70014

.btn--with-rocker
  padding: 0 $half-spacing 0 0

  &:hover,
  &:focus
    background: transparent
    color: $c-text
    cursor: default

.btn--rocker
  display: inline-block
  padding: 0
  margin-right: 0.9em
  border: 0

  &:hover,
  &:active
    background: transparent
    border-color: transparent

  [class^='icon--']
    margin: 0
    line-height: 1

  .btn__label
    @extend .hidden

.btn--rocker__up,
.btn--rocker__down
  display: block
  padding: 0 2px
  height: 1.5em
  margin-bottom: 1px
  margin-right: .2em
  color: $c-white
  background: $c-gray-medium
  text-align: center
  border: none
  line-height: 1.5
  transition: background-color $transition-duration $easeOutExpo
  border-radius: 0

  &:hover,
  &:focus
    background: $c-highlight
    color: $c-white

.btn--rocker__down
  margin-bottom: 0

*[data-placeholder]:empty:not(:focus):not([data-hide-placeholder])::before
  color: #b2b2b1
  font-style: normal
  content: attr(data-placeholder)