@import "@/common/styles/colors"

.header-main
  margin-top: 2rem
  display: flex
  align-items: center
  justify-content: space-between
  color: $white

.header-right
  display: flex

.header-right svg
  margin-left: 15px

.header-main *
  font-size: 24pt

.header-main h2
  margin-left: 10%
  display: flex
  gap: 1rem
  align-items: center
  padding: 0.5rem 1rem
  border-radius: 1rem

.header-main .h2-click
  cursor: pointer
  user-select: none

.header-main .h2-click:hover
  color: $green-hover
  background-color: $dark-gray

.header-main div
  margin-right: 10%

.header-icon
  cursor: pointer
  transition: all 50ms ease-in-out
  width: 30px
  height: 30px

.header-icon:hover
  transform: scale(1.1)
  color: $green

.test-running
  animation: pulse 2s infinite
  border-radius: 150px
  color: $green

.test-running:hover
  color: $green-hover

.update-icon
  animation: pulse-update 2s infinite
  border-radius: 150px

.update-icon:hover
  color: $orange-hover

@keyframes pulse-update
  0%
    box-shadow: 0 0 0 0 $orange
  70%
    box-shadow: 0 0 0 10px #CCA92C00
  100%
    box-shadow: 0 0 0 0 #CCA92C00

@media (max-width: 460px)
  .header-main
    justify-content: center
  .header-main div
    margin-right: 0
  .header-main h2
    margin-left: 0
    font-size: 24pt
  .header-icon
    width: 25px
    height: 25px


@media (max-width: 360px)
  .header-main h2
    font-size: 16pt
    text-overflow: ellipsis
    overflow: hidden
  .header-icon
    width: 20px
    height: 20px