@import "@styles/colors"

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

.calculate-container
  display: flex
  flex-direction: column
  gap: 1rem
  user-select: none
  width: 55rem

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

    .round-item
      width: 12rem

      h2, p
        margin: 0

    .round-item:nth-child(1)
      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)