*
  box-sizing: border-box
  margin: 0
  padding: 0
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

.z-next-enter
  opacity: 0

.z-prev-leave
  opacity: 1

.z-next-enter-active
  opacity: 0
  animation-name: appear
  animation-duration: 2000ms
  animation-fill-mode: forwards

.z-prev-leave-active
  opacity: 1
  animation-name: disappear
  animation-duration: 1000ms
  animation-fill-mode: forwards

.z-input
  font: inherit
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-rendering: optimizeLegibility
  margin-top: 20px
  width: 100%
  appearance: none
  box-shadow: none
  border: none
  color: inherit
  border-bottom-width: 1px
  border-bottom-style: solid
  border-bottom-color: inherit
  background: inherit
  outline: none
  text-align: center

.z-canvas
  font-family: 'Source Sans Pro', sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-rendering: optimizeLegibility
  background-color: var(--background-color)
  color: var(--foreground-color)
  transition: background-color 500ms
  overflow: hidden

  &.is-full-mode
    position: fixed
    width: 100%
    height: 100%
    font-size: calc(13px + 1vmax)

  &.is-mixed-mode
    position: absolute
    width: 100%
    height: 100%
    font-size: calc(13px)

#z-zoomable-layer
  position: absolute
  top: 50%
  left: 50%
  text-decoration: none
  will-change: transform
  perspective: 1000px

.z-shape
  overflow: visible
  position: absolute
  display: block
  border-radius: 50%
  border-width: 3px
  border-style: solid
  top: 50%
  left: 50%
  text-align: center

  .square &
    border-radius: 5%

  &.is-square
    border-radius: 5%

  &.is-circle
    border-radius: 50%

  &.z-view
    z-index: 40
    will-change: transform, opacity
    transition: background-color 800ms

  &.is-extension
    z-index: 80

    &.z-spot
      cursor: zoom-in

      &:hover
        z-index: 400

      &[role=button]
        cursor: pointer

        &:hover
          border-color: var(--accent-text-and-border-color) !important
          transition: border-color 300ms

    &.z-dialog
      z-index: 500

    &.z-scale, &.z-spot, &.z-range
      will-change: transform, opacity
      transition: background-color 1s

    &.z-pagination
      &:hover
        cursor: grab
        border-color: var(--main-text-and-border-color) !important
        transition: border-color 300ms

      &:active
        cursor: grabbing

    &.z-range, &.z-scroll
      cursor: pointer

      &:hover
        cursor: pointer

      &:active
        cursor: grabbing

.papa
  position: relative
  left: 0

.z-scroll
  cursor: pointer

  &:hover
    cursor: pointer

  &:active
    cursor: grabbing

.z-content
  position: absolute
  z-index: 0
  top: 1%
  left: 1%
  right: 1%
  bottom: 1%
  width: 98%
  height: 98%
  display: flex
  background: none
  flex-direction: column
  align-items: center
  justify-content: center
  overflow: hidden
  border-radius: 50%

  .square &
    border-radius: 5%

  &.is-square
    border-radius: 5%

  &.is-circle
    border-radius: 50%

  &.maincontent
    cursor: default
    z-index: 50

    &.long-content
      display: block

      &::before
        display: block
        padding-top: 80px
        content: ''

      &::after
        top: 0
        display: block
        padding-bottom: 80px
        content: ''

    &.overflow-square
      overflow-y: scroll

.z-label
  font-size: calc(8px + 1vw)
  position: absolute
  height: 25px
  background: none
  white-space: nowrap

  &.bottom
    width: 100%
    top: 115%
    display: flex
    flex-direction: column
    align-items: center

    > .inside
      border-radius: 25px
      padding-left: 5px
      padding-right: 5px
      background-color: var(--background-color)
      border: 1px solid transparent

  &.top
    width: 100%
    top: calc(-15% + -25px)
    display: flex
    flex-direction: column
    align-items: center

    > .inside
      border-radius: 25px
      padding-left: 5px
      padding-right: 5px
      background-color: var(--background-color)

  &.left
    width: fit-content
    margin-top: calc(50% - 12.5px)
    margin-right: 8px
    right: 115%

    > .inside
      border-radius: 25px
      padding-left: 5px
      padding-right: 5px
      background-color: var(--background-color)

  &.right
    width: fit-content
    margin-top: calc(50% - 12.5px)
    margin-left: 8px
    left: 115%

    > .inside
      border-radius: 25px
      padding-left: 5px
      padding-right: 5px
      background-color: var(--background-color)

.overflow
  overflow: visible

.z-no-zoom-cursor
  cursor: default !important

.z-scroll, .z-slider, .z-range-bar
  position: absolute
  overflow: visible
  display: block
  z-index: 40
  fill: none
  stroke-linecap: round
  stroke-opacity: 1

  &:hover
    cursor: grab

  &:active
    cursor: grabbing

.z-scroll-bar, .z-range-bar-bar
  position: absolute
  border-radius: 50%
  display: block
  width: 40px
  height: 40px
  top: 50%
  left: 50%
  margin: -20px 0 0 -20px
  z-index: 70

  &:hover
    cursor: grab

  &:active
    cursor: grabbing

.is-past-view
  pointer-events: none
  cursor: zoom-out
  filter: blur(2px) opacity(20%)
  overflow: hidden
  z-index: 0

.is-previous-view
  pointer-events: none
  cursor: zoom-out
  filter: blur(2px) opacity(40%)
  overflow: hidden
  z-index: 50

.is-previous-view section.z-list
  pointer-events: none

.is-previous-view div
  cursor: zoom-out

.is-current-view
  pointer-events: auto
  will-change: opacity
  z-index: 100

.z-outer-circle, .z-outer-spot
  position: absolute
  z-index: 0
  top: 50%
  left: 50%
  border-radius: 50%
  overflow: hidden

  .square &
    border-radius: 5%

  &.is-square
    border-radius: 5%

  &.is-circle
    border-radius: 50%

.z-outer-circle
  border-width: 1px
  border-style: dashed
  opacity: 0.2

.z-outer-spot
  border-width: 3px
  border-style: solid
  border-color: var(--accent-text-and-border-color) !important
  opacity: 0

.z-outer-point
  position: absolute
  z-index: 90
  top: 50%
  left: 50%
  border-radius: 50%
  opacity: 1
  overflow: hidden

  .square &
    border-radius: 5%

  &.is-square
    border-radius: 5%

  &.is-circle
    border-radius: 50%

.z-dialog-transition-enter-active, .z-dialog-transition-leave-active
  transition: transform 0.3s
  position: absolute
  top: 50%
  left: 50%
  z-index: 500

.z-dialog-transition-enter, .z-dialog-transition-leave-to
  transform: scale(0)

.z-pulse
  opacity: 0
  transform: scale(0)
  background-color: rgba(255, 255, 255, 0.1)
  width: 100%
  height: 100%
  margin: -50% 0 0 -50%
  position: absolute
  z-index: 0
  top: 50%
  left: 50%
  border-radius: 50%

  .square &
    border-radius: 5%

  &.is-square
    border-radius: 5%

  &.is-circle
    border-radius: 50%

.pulse-animation
  animation: pulse 350ms ease-out

.spot-animation
  animation: spot 700ms ease-in

@keyframes pulse
  0%
    opacity: 0
    transform: scale(0)

  100%
    opacity: 1
    transform: scale(1.4)

@keyframes appear
  0%
    opacity: 0

  100%
    opacity: 1

@keyframes disappear
  0%
    opacity: 1

  100%
    opacity: 0

@keyframes spot
  0%
    opacity: 0
    transform: scale(1)
  45%
    opacity: 0.2
    transform: scale(1)
  85%
    opacity: 0
    transform: scale(1.3)
  100%
    opacity: 0
    transform: scale(1.4)