.readymade-mini-tutorial-underlay
  background: rgba(black, 0.5)
  bottom: 0
  display: none
  left: 0
  opacity: 0
  position: fixed
  right: 0
  top: 0
  transition: opacity 0.25s

  &[data-transitioning],
  &[aria-hidden=false]
    display: block
  
  &[aria-hidden=false]
    opacity: 1

  &[aria-hidden=false] > .readymade-mini-tutorial-dialog
    transform: translate(-50%, -50%) scale(1, 1)

.readymade-mini-tutorial-dialog
  background: white
  background: white linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1))
  border-radius: 5px
  box-shadow: 0 1px 3px black
  color: black
  display: flex
  flex-direction: column
  max-height: 80vh
  max-width: 80vw
  left: 50%
  overflow: hidden
  perspective: 500px
  position: absolute
  top: 50%
  transform: translate(-50%, -50%) scale(2, 0)
  transform-origin: 50% 50%
  // transition: transform 0.1s

  [data-open] > &
    transform: translate(-50%, -50%) scale(1, 1)

[name="readymade-mini-tutorial-close"]
  @extends #_RESET_BUTTON
  background: rgba(black, 0.8)
  border-radius: 50%
  color: white
  height: 1.5em
  position: absolute
  right: 0.3em
  top: 0.3em
  width: 1.5em
  z-index: 2

.readymade-mini-tutorial-images
  display: flex
  flex: 1 1 auto
  flex-direction: column
  position: relative
  z-index: 1

.readymade-mini-tutorial-image
  flex: 1 1 auto
  width: auto

  &:not([data-readymade-active])
    display: block

.readymade-mini-tutorial-contents
  display: inline-block
  flex: 0 1 auto
  overflow: auto
  padding: 1em 3em

.readymade-mini-tutorial-content
  &:not([data-readymade-active])
    display: block

.readymade-mini-tutorial-actions
  flex: 0 0 auto
  padding: 0.5em 3em
  text-align: center

  button
    @extends #_RESET_BUTTON
    background: white
    border: 1px solid rgba(black, 0.5)
    border-radius: 3px
    box-shadow: 0 2px 2px -3px black
    margin: 0 0.5em
    padding: 0.25em 2em
    transform: translateY(0)

    &:hover
      border-color: rgba(black, 1)

    &:active
      box-shadow: 0 0 3px rgba(black, 0.25) inset
      transform: translateY(1px)

    &[name="readymade-mini-tutorial-previous"]
      display: none

    &[name="readymade-mini-tutorial-next"],
    &[name="readymade-mini-tutorial-finish"]
      font-weight: bold

      &:disabled
        display: none

.readymade-mini-tutorial-steppers
  display: flex
  flex: 1 0 auto
  justify-content: center
  padding: 0.5em 3em 1em

[name="readymade-mini-tutorial-stepper"]
  @extends #_RESET_BUTTON
  height: .8em
  overflow: hidden

  & > .readymade-mini-tutorial-button-label
    display: block
    height: 0
    width: 0
    line-height: 0
    text-indent: -50px

  &::after
    background: currentColor
    border-radius: 50%
    box-shadow: 0 -1px 1px white
    content: ""
    display: block
    height: 0.5em
    margin: 0 0.25em
    width: 0.5em

  &[aria-selected=false]::after
    opacity: 0.5
  &[aria-selected=true]::after
    opacity: 1