@tailwind base
@tailwind components
@tailwind utilities
@yaireo/tagify/src/tagify.scss

$c-default-text: #222
$c-default-icon: #888
$c-blue: rgb(28, 176, 246)
$c-blue-shadow: rgb(24, 153, 214)
$c-green: rgb(88, 204, 2)
$c-green-shadow: rgb(88, 167, 0)
$c-red: rgb(255, 69, 58)
$c-red-shadow: darken($c-red, 10%)
$c-gold: rgb(255, 200, 0)
$c-gold-flare: rgb(251, 233, 2)
$c-gold-shadow: rgb(221, 164, 11)
$c-gold-text: rgb(195, 126, 11)
$c-white-shadow: rgb(222, 222, 222)
$c-gray: rgb(229, 229, 229)
$c-gray-shadow: rgb(175, 175, 175)
$border-radius: 16px
$shadow-width: 0 4px 0

.c-blue
  color: $c-blue
.c-green
  color: $c-green
.bg-green
  background-color: $c-green
.round
  border-radius: $border-radius

html
  height: 100%

body
  margin: 0
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

  color: $c-default-text
  height: 100%

#root
  height: 100%

code
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace

button
  background-color: $c-blue
  border: none
  border-radius: $border-radius
  box-shadow: $shadow-width $c-blue-shadow
  color: white
  cursor: pointer
  font-weight: 600
  padding: 12px 16px
  width: 100%
  transition: all 0.2s ease-in-out

button.green
  background-color: $c-green
  box-shadow: $shadow-width $c-green-shadow

button.red
  background-color: $c-red
  box-shadow: $shadow-width $c-red-shadow

button.white
  background-color: white
  color: $c-default-text
  border: solid $c-white-shadow
  border-width: 2px 2px 4px
  box-shadow: none

.box
  border: solid $c-white-shadow
  border-width: 2px 2px 4px
  border-radius: $border-radius
  padding: 10px 16px
  width: 100%

  &.no-shadow
    border-width: 2px

.box.green
  border: none
  background-color: $c-green
  box-shadow: $shadow-width $c-green-shadow
  color: white

input
  @extend .box
  transition: all 0.2s ease-in-out

  &:focus
    outline: none
    border-color: $c-green

label
  display: block
  font-size: 0.9em
  font-weight: 600
  margin-bottom: 0.5em

h1
  font-size: 2em
  margin-bottom: 0.5em
  text-align: center

h2
  font-size: 1.5em
  margin-bottom: 0.5em
  text-align: center
  
.subtext
  text-align: center
  color: rgb(75, 85, 99)
  opacity: 0.8

.v-layout
  display: flex
  flex-direction: column
  justify-content: center

  gap: 1em
  width: 100%

  margin-bottom: 60px

  &.non-center
    justify-content: flex-start

  &.gap2
    gap: 2em

.page-pad
  padding: 2em 1em
  height: 100%
  @extend .non-center

.navbar
  position: fixed
  bottom: 0
  left: 0
  width: 100%
  border-top: solid $c-white-shadow
  border-width: 2px 0 0
  display: flex
  justify-content: space-around
  padding: 10px
  color: $c-default-icon
  background-color: white

.navbar-item
  text-decoration: none
  transition: color 0.3s ease
  display: flex
  align-items: center
  flex-direction: column

  svg
    width: 24px
    height: 24px

  span
    font-size: 12px

  &.active
    color: $c-green

.character
  display: flex
  flex-direction: column
  align-items: center
  gap: 1em

  img
    width: 150px
    height: 150px
    border-radius: 50%
    object-fit: cover
    background: $c-green

  p
    font-size: 0.9em
    font-weight: 800

.back-button
  color: #a0aec0
  font-size: 1.5rem

.record-container
  background-color: white !important
  position: fixed
  bottom: 0px
  left: 50%
  transform: translateX(-50%)
  width: 100%
  padding: 10px 16px

.record-btn.red
  background-color: $c-red
  box-shadow: $shadow-width $c-red-shadow

.chat-area
  display: flex
  flex-direction: column
  width: 100%
  max-width: 600px
  margin: 20px auto

.message
  margin: 3px
  padding: 10px
  border-radius: 5px
  color: white

.message.me
  align-self: flex-end
  background-color: $c-blue
  border-radius: 20px 0 20px 20px

.message.other
  align-self: flex-start
  background-color: $c-green
  border-radius: 0 20px 20px 20px

.tags
    display: flex
    flex-wrap: wrap
    border: solid $c-white-shadow
    padding: 10px
    border-radius: 20px
    height: 200px
    overflow-y: scroll
    align-content: flex-start
    gap: 10px 5px
    margin-top: 3px

.tag
    background-color: $c-blue
    color: white
    border-radius: 20px
    padding: 5px 10px
    margin: 0
    display: flex
    align-items: center
    justify-content: space-between
    height: 30px

.delete-tag
    margin-left: 6px
    font-weight: 600
    width: 20px
    height: 20px
    color: white
    display: flex
    align-items: center
    justify-content: center
