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

.floating-date-indicator
  position: fixed
  user-select: none
  top: 30px
  display: flex
  transform: translateX(-50%)
  left: 50%
  z-index: 50
  background: $dark-gray
  backdrop-filter: blur(10px)
  border: $light-gray 2px solid
  border-radius: 12px
  padding: 12px 24px
  text-align: center
  font-weight: 600
  color: $white
  box-shadow: 0 0 15px rgba($light-gray, 0.5)
  animation: slideInDown 0.3s ease-out

  span
    font-size: 22px
    letter-spacing: 0.5px

@keyframes slideInDown
  from
    opacity: 0
    transform: translateX(-50%) translateY(-20px)
  to
    opacity: 1
    transform: translateX(-50%) translateY(0)

.loading-more, .end-of-list
  text-align: center
  padding: 20px
  color: $subtext
  font-style: italic

.error-text
  margin: 0
  font-size: 26pt
  font-weight: 700
  text-align: center
  color: $subtext

@media (max-width: 605px)
  .error-text
    width: 28rem
    
  .floating-date-indicator
    top: 15px
    padding: 10px 20px
    
    span
      font-size: 13px

  .back-to-top-button
    bottom: 20px
    right: 20px
    width: 48px
    height: 48px
    
    svg
      width: 20px
      height: 20px

@media (max-width: 475px)
  .error-text
    width: 20rem

.back-to-top-button
  position: fixed
  bottom: 30px
  right: 30px
  z-index: 50
  width: 56px
  height: 56px
  background: $dark-gray
  backdrop-filter: blur(10px)
  border: $light-gray 2px solid
  border-radius: 50%
  color: $white
  cursor: pointer
  display: flex
  align-items: center
  justify-content: center
  box-shadow: 0 0 15px rgba($light-gray, 0.5)
  transition: all 0.3s ease
  animation: slideInUp 0.3s ease-out
  
  &:hover
    transform: translateY(-3px)
    box-shadow: 0 4px 20px rgba($light-gray, 0.7)
    background: $light-gray
    
  &:active
    transform: translateY(-1px)
    
  svg
    width: 24px
    height: 24px
    
@keyframes slideInUp
  from
    opacity: 0
    transform: translateY(20px)
  to
    opacity: 1
    transform: translateY(0)