.terminal
  background-color: $total-black
  color: $white

.terminal--white
  background-color: $white
  color: $total-black

.terminal__window
  display: flex
  flex-direction: column
  position: relative
  width: 100%
  max-width: 100%
  height: 100%
  border-radius: 8px
  text-align: left
  color: inherit

.terminal__header
  display: flex
  align-items: center
  height: 60px
  min-height: 60px
  max-height: 60px
  border-radius: 8px 8px 0 0
  padding: 0 24px

  +media(s)
    height: 40px
    min-height: 40px
    max-height: 40px
    padding: 0 12px

.terminal__button
  width: 12px
  height: 12px
  border-radius: 6px

.terminal__button + .terminal__button
  margin-left: 6px

.terminal__button--green
  background: #4CAF50

.terminal__button--yellow
  background: #FFC107

.terminal__button--red
  background: #F44336

.terminal__section
  width: 100%
  height: 100%
  position: relative
  color: inherit
  font-size: 16px
  line-height: 24px
  padding: 0 48px
  overflow: auto

  +media(l)
    padding: 0 32px

  +media(s)
    padding: 0 24px
    font-size: 14px

.terminal__result
  opacity: 0
  pointer-events: none
  user-select: none
  color: inherit
  position: relative
  z-index: 1

.terminal__result--active
  opacity: 1
  pointer-events: auto
  user-select: auto

.typed-cursor.terminal__cursor--hidden
  opacity: 0
  animation: none

.terminal__spinner
  position: absolute
  top: calc(50% - 24px)
  left: calc(50% - 24px)
  width: 48px
  height: 48px
  opacity: 0
  color: inherit
  pointer-events: none
  user-select: none
  animation: animateLoaderRotation 2s linear infinite
  z-index: 2

  & .path
    stroke-linecap: square
    animation: animateLoaderDash 1.5s ease-in-out infinite

.terminal__spinner--active
  opacity: 1
  pointer-events: auto
  user-select: auto

.terminal .terminal__spinner
  color: $white

.terminal.terminal--white .terminal__spinner
  color: $total-black

.terminal__confetti
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  user-select: none
  pointer-events: none

.terminal__notification
  display: none
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  font-size: 84px
  line-height: 100px
  font-weight: 700
  letter-spacing: -0.03em
  color: inherit
  animation: animateTerminalNotification $all-xl ease

  +media(l)
    font-size: 48px
    line-height: 72px

  +media(s)
    top: 60%
    font-size: 24px
    line-height: 32px

.terminal__notification--active
  display: block