@import "@styles/colors"

.dialog-overlay
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  background-color: rgba(0, 0, 0, 0.5)
  z-index: 10
  display: flex
  justify-content: center
  align-items: center

.dialog
  position: absolute
  z-index: 11
  padding: 0 0 1rem 0
  animation: dialogFade 0.3s

  .dialog-header
    display: flex
    justify-content: space-between
    align-items: center
    padding: 0 1.5rem
    gap: 4rem

  .dialog-sub
    display: flex
    align-items: center
    gap: 1rem

    h2
      margin: 0

    hr
      width: 100%
      margin: 0
      border: 1px solid $text
      border-radius: 1rem

  .dialog-title
    display: flex
    align-items: center
    gap: 1rem

  .dialog-content
    margin: 0 1rem
    display: flex
    flex-direction: column
    gap: 0.5rem
    max-height: 20rem
    overflow-y: scroll
    overflow-x: hidden

    h3
      margin: 0
      color: $primary

  .dialog-item
    display: flex
    align-items: center
    justify-content: space-between

    .dialog-left
      display: flex
      align-items: center
      gap: 1rem

    .dialog-right
      display: flex
      align-items: center
      gap: 1rem
      margin-right: 0.5rem

    h2
      margin: 0

    input
      width: 5rem
      padding: 0.5rem 0.5rem
      color: $text
      font-weight: 600
      font-size: 16pt

  svg
    font-size: 18pt

  svg:nth-child(2)
    color: $error
    cursor: pointer

.dialog-closed
  opacity: 0
  animation: dialogFadeOut 0.3s
  display: none

.demand-area
  display: flex
  justify-content: right

@keyframes dialogFadeOut
  from
    transform: scale(1)
    opacity: 1
    display: block
  to
    transform: scale(0)
    opacity: 0
    display: none

@keyframes dialogFade
  from
    transform: scale(0)
    opacity: 0
  to
    transform: scale(1)
    opacity: 1