@use "@/common/styles/colors" as *

$purple-primary: #8b5cf6
$purple-secondary: #7c3aed
$purple-glow: rgba(139, 92, 246, 0.4)

.analyse-area
  margin-top: 2rem
  display: flex
  padding: 2.5rem 2rem
  border: 1px solid $light-gray
  background-color: var(--glass-bg)
  backdrop-filter: blur(16px)
  -webkit-backdrop-filter: blur(16px)
  border-radius: 1rem
  width: 100%
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
  align-items: center
  justify-content: center
  margin-bottom: 2rem
  box-sizing: border-box
  user-select: none
  position: relative
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)

.pulse
  border-color: $accent-primary
  animation: pulse 2s infinite

@keyframes pulse
  0%
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6)
  70%
    box-shadow: 0 0 0 12px rgba(16, 185, 129, 0)
  100%
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0)

.test-running
  border: 1px solid $light-gray
  animation: none
  position: relative

.loading-value
  display: inline-block
  animation: value-pulse 1.5s ease-in-out infinite

@keyframes value-pulse
  0%, 100%
    opacity: 0.3
  50%
    opacity: 0.6

.inner-container
  margin-left: 2rem
  margin-right: 2rem
  transition: margin 0.5s
  animation: fadeIn 0.5s ease-out

.container-header
  display: flex
  align-items: center

.tests-paused
  border-color: $accent-warning

.container-text
  margin: 0 0 0 25px
  color: $white
  font-weight: 500
  font-size: 24pt
  white-space: nowrap

.container-subtext
  color: $subtext
  font-size: 15pt
  margin-left: 10px
  font-weight: 400

.container-main
  text-align: center
  color: $subtext

  h2
    font-size: 28pt
    font-weight: 600
    margin: 1rem
    display: flex
    align-items: center
    justify-content: center

.jitter-suffix
  font-size: 14pt
  font-weight: 400
  color: $subtext
  cursor: pointer
  transition: opacity 0.2s ease
  padding-left: 0.4rem
  margin-left: 0.4rem
  border-left: 2px solid $light-gray
  opacity: 0.7
  display: flex
  align-items: center
  gap: 0.25rem

  &:hover
    opacity: 1

  .jitter-icon
    width: 0.9rem
    height: 0.9rem

@media (max-width: 1351px)
  .inner-container
    margin-left: 1rem
    margin-right: 1rem

@media (max-width: 1200px)
  .analyse-area
    flex-wrap: wrap
  .mobile-break
    width: 100%
  .analyse-area
    justify-content: space-evenly

@media (max-width: 730px)
  .analyse-area
    flex-direction: column

@media (max-width: 475px)
  .analyse-area
    padding-left: 1rem
    padding-bottom: 1rem
    padding-top: 1rem
  .inner-container
    margin: 0