@import "@styles/colors"

.calculate-state
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center

.calculate-state-inner
  display: flex
  align-items: start
  gap: 2rem

.calculate-container
  display: flex
  flex-direction: column
  gap: 1rem
  user-select: none
  align-items: center

  .current-round
    padding: 1rem 2rem

    h2
      font-size: 18pt
      font-weight: 700
      margin: 0

  .button-area
    display: flex
    gap: 1rem

  .btn
    animation: roundIn 0.8s ease-out

  .round
    max-width: 63rem
    display: flex
    padding: 1rem 2rem
    transition: 1s ease-in-out
    animation: roundIn 0.7s ease-out

    .round-item
      width: 14rem

      h2, p
        margin: 0

    .round-item:nth-child(1)
      width: 18rem

    .round-item:nth-child(1) h2
      width: 18rem
      text-overflow: ellipsis
      overflow: hidden

  .round-red
    color: $error
  .round-green
    color: $success

.customer
  display: flex
  padding: 1rem 1rem
  align-items: center
  gap: 0.5rem
  transition: 1s ease-in-out

  svg
    font-size: 28pt

  .customer-item
    user-select: none
    h2, p
      margin: 0

@keyframes roundIn
  0%
    opacity: 0
    transform: scale(0.3)
  50%
    opacity: 1
    transform: scale(1.05)
  70%
    transform: scale(0.9)
  100%
    transform: scale(1)

@media screen and (max-width: 1300px)
  .calculate-container .round
    max-width: 50rem
  .round-item:nth-child(4)
    display: none