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

.footer
  margin-top: 4rem
  padding: 2rem 6rem
  border-top: 1px solid $border-color

.footer-content
  display: flex
  align-items: center
  justify-content: space-between

.footer-left p
  font-size: 0.875rem
  color: $text-muted

.footer-links
  display: flex
  align-items: center
  gap: 2rem

  a
    font-size: 0.875rem
    color: $text-secondary
    transition: color 0.2s

    &:hover
      color: $text

.footer-right .github-link
  display: flex
  align-items: center
  justify-content: center
  width: 2.25rem
  height: 2.25rem
  background: $background-lighter
  border: 1px solid $border-color
  border-radius: 8px
  color: $text-secondary
  transition: all 0.2s

  &:hover
    color: $text
    border-color: $border-hover

  svg
    font-size: 1rem

@media (max-width: 900px)
  .footer
    padding: 2rem

  .footer-content
    flex-direction: column
    gap: 1.5rem

  .footer-links
    flex-wrap: wrap
    justify-content: center
    gap: 1.5rem

@media (max-width: 640px)
  .footer
    padding: 1.5rem

  .footer-links
    gap: 1rem

    a
      font-size: 0.8125rem