@import "@/common/styles/colors"

.speedtest
  margin-bottom: 2rem
  display: flex
  padding: 1.5rem 2rem
  border: $darker-white 1px solid
  border-radius: 15px
  justify-content: space-between
  width: 80rem
  flex-wrap: wrap
  transition: all 0.5s
  animation: fadeIn 0.5s

.speedtest-hidden
  visibility: hidden
  opacity: 0
  animation: fadeOut 0.3s

.speedtest-row
  display: flex
  align-items: center

.date
  display: flex
  align-items: center

.date-text
  margin: 0 0 0 1rem
  font-size: 24pt
  font-weight: 900
  color: $darker-white

.speedtest-text
  margin: 0
  font-size: 28pt
  font-weight: 900
  color: $darker-white

.tooltip-element
  position: relative

.tooltip-element .tooltip
  user-select: none
  pointer-events: none
  font-size: 16pt
  opacity: 0
  bottom: 120%
  left: 50%
  margin-left: -60px
  background-color: $dark-gray
  color: $darker-white
  text-align: center
  border-radius: 6px
  padding: 5px 10px
  height: fit-content

  z-index: 90
  position: absolute
  transition: opacity 0.2s

.tooltip-bottom .tooltip
  bottom: 0
  top: 120%

.tooltip-element .tooltip-invisible
  visibility: hidden

.tooltip-element:hover .tooltip
  opacity: 1

@media (max-width: 1351px)
  .speedtest
    width: 70rem

@media (max-width: 1200px)
  .speedtest
    width: 60rem

@media (max-width: 1050px)
  .speedtest
    width: 40rem

@media (max-width: 900px)
  .tooltip-element .tooltip
    font-size: 14pt

@media (max-width: 730px)
  .tooltip-element .tooltip
    font-size: 11pt
  .speedtest
    width: 33rem

@media (max-width: 605px)
  .speedtest
    width: 25rem
    flex-direction: column
  .date-text
    font-size: 32pt
  .speedtest-text
    font-size: 32pt

@media (max-width: 475px)
  .tooltip-element .tooltip
    font-size: 12pt
    padding: 5px 4px
  .speedtest
    width: 18rem

@media (max-width: 360px)
  .speedtest
    width: 16rem