@import "@/common/styles/colors"

.otamatone-container
  display: flex
  justify-content: center
  align-items: center
  position: fixed
  left: 0
  right: 0
  bottom: 0
  padding: 20px
  background-color: rgba(30, 30, 30, 0.5)
  backdrop-filter: blur(10px)
  border-radius: 20px
  margin: 20px
  z-index: 1

.otamatone
  display: flex
  flex-direction: row
  align-items: center
  cursor: pointer
  padding: 10px
  width: 100%

.otamatone-neck
  flex: 1
  height: 20px
  background: linear-gradient(135deg, #000, #444)
  border-radius: 10px
  position: relative

.frequency-indicator
  position: absolute
  top: -10px
  width: 20px
  height: 20px
  background-color: #ff0000
  border-radius: 50%
  transform: translateX(-50%)

.note-marker
  position: absolute
  top: -30px
  font-size: 24pt
  color: $white

.otamatone-face
  width: 100px
  height: 100px
  background: radial-gradient(circle, #fff, #ddd)
  border-radius: 50%
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  position: absolute
  left: 0
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)

.otamatone-eyes
  display: flex
  justify-content: space-between
  width: 60%
  position: absolute
  top: 30px

.eye
  width: 15px
  height: 15px
  background-color: #000
  border-radius: 50%

.left-eye
  margin-right: 10px

.right-eye
  margin-left: 10px

.otamatone-mouth
  background-color: #000
  border-radius: 50%
  position: absolute
  bottom: 10px