@import "@/common/styles/colors"

.qr-code
  width: 100%
  border: 2px solid $dark-gray
  border-radius: 1.5rem
  padding: 1.5rem 2rem

.qr-code .tabs
  display: flex
  gap: 1rem
  overflow-x: scroll

.qr-code .tab
  font-size: 28pt
  color: $darker-white
  margin: 0
  cursor: pointer
  user-select: none

  &:hover
    color: $primary

.qr-code .tab-selected
  border-bottom: 3px solid $primary
  border-radius: 2px
  color: $white

.qr-editor
  display: flex
  padding-top: 2rem
  justify-content: space-between
  overflow: hidden
  gap: 3rem

.qr-input
  width: 100%

.qr-area
  background-color: $background
  color: $darker-white
  border-radius: 1rem
  padding: 1rem
  resize: none
  width: 100%
  height: 100%
  box-sizing: border-box
  font-size: 16pt

.qr-group
  display: flex
  gap: 1rem
  align-items: center
  justify-content: space-between
  flex-wrap: wrap
  margin-bottom: 1rem

  h2
    color: $white
    margin: 0

.qr-input-field
  background-color: $background
  color: $darker-white
  border: 2px solid $dark-gray
  border-radius: 1rem
  padding: 1rem
  box-sizing: border-box
  font-size: 16pt

.qr-result
  border: 0.5rem solid $white
  border-radius: 1rem

@media screen and (max-width: 1024px)
  .qr-code .tab
    font-size: 20pt
  .qr-editor
    flex-direction: column
    gap: 1rem
    align-items: center
  .qr-input-field
    width: 100%