// SCSS project for testing preprocessor compatibility

$primary-color: #007bff;
$secondary-color: #6c757d;
$font-size-small: 11px; // Should trigger a11y/font-size-is-readable

// Mixins
@mixin button-base {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:focus {
    outline: none; // Should trigger a11y/no-outline-none
    box-shadow: 0 0 0 2px rgba($primary-color, 0.25);
  }

  &:hover {
    transform: translateY(-1px); // Should trigger a11y/selector-pseudo-class-focus
  }
}

@mixin animated($duration: 0.3s) {
  transition: all $duration ease; // Should trigger a11y/media-prefers-reduced-motion
  animation: pulse 1s infinite; // Should trigger a11y/media-prefers-reduced-motion
}

// Components
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;

  &__header {
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;

    h3 {
      margin: 0;
      font-size: $font-size-small; // Should trigger a11y/font-size-is-readable
      text-align: justify; // Should trigger a11y/no-text-align-justify
    }
  }

  &__content {
    line-height: 1.1; // Should trigger a11y/line-height-is-vertical-rhythmed

    &::before {
      content: '📄'; // Should trigger a11y/content-property-no-static-value
      margin-right: 0.5rem;
    }
  }

  &__actions {
    margin-top: 1rem;

    .btn {
      @include button-base;
      @include animated;
    }
  }
}

// Navigation
.navbar {
  background: $primary-color;
  padding: 1rem 0;

  .nav-item {
    display: inline-block;
    margin-right: 1rem;

    a {
      color: white;
      text-decoration: none;
      font-size: 10px; // Should trigger a11y/font-size-is-readable

      &:hover {
        text-decoration: underline; // Should trigger a11y/selector-pseudo-class-focus
      }

      &.active {
        font-weight: bold;

        &::after {
          content: ' (current)'; // Should trigger a11y/content-property-no-static-value
        }
      }
    }
  }
}

// Utilities
.sr-only {
  display: none; // Should trigger a11y/no-display-none
}

.text-spread {
  letter-spacing: 2px; // Should trigger a11y/no-spread-text
}

// Animations
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.animated-dropdown {
  animation: slideDown 0.5s ease; // Should trigger a11y/media-prefers-reduced-motion
}

// Media queries
@media (max-width: 768px) {
  .navbar {
    .nav-item a {
      font-size: 9px; // Should trigger a11y/font-size-is-readable

      &:hover {
        color: lighten($primary-color, 20%); // Should trigger a11y/selector-pseudo-class-focus
      }
    }
  }

  .card {
    &__header h3 {
      line-height: 1; // Should trigger a11y/line-height-is-vertical-rhythmed
    }
  }
}

// Nested selectors with issues
.complex {
  .wrapper {
    .container {
      .content {
        a:hover {
          outline: none; // Should NOT trigger a11y/no-outline-none (no :focus)
          font-size: 8px; // Should trigger a11y/font-size-is-readable
        }

        .button:focus {
          outline: 0; // Should trigger a11y/no-outline-none
        }
      }
    }
  }
}