/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Footer component */
@layer components {
  .footer {
    padding-block: var(--space-xl);
    padding-inline: var(--space-l);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    text-align: center;

    & .footer__content {
      max-width: 1200px;
      margin-inline: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-m);

      @media (max-width: 768px) {
        flex-direction: column;
        gap: var(--space-s);
      }
    }

    & .footer__copyright {
      font-size: var(--size-step-0);
      color: var(--color-text-muted);
    }

    & .footer__links {
      display: flex;
      gap: var(--space-m);
      list-style: none;
      padding: 0;

      @media (max-width: 768px) {
        justify-content: center;
        flex-wrap: wrap;
      }

      & a {
        color: var(--color-text);
        text-decoration: none;
        transition: color 0.3s ease;

        &:hover {
          color: var(--color-accent);
        }
      }
    }

    /* Easter Egg */
    & .footer__egg {
      font-size: 0.7rem;
      opacity: 0.1;
      cursor: default;
      transition: opacity 2s ease, transform 1s ease;

      &:hover {
        opacity: 1;
        transform: scale(1.1);
        color: var(--color-accent);
      }
    }
  }
}