// Sample SCSS file for testing — SampleFiles.online
// SCSS (Sassy CSS) is the most popular CSS preprocessor syntax.

$primary-color: #4f46e5;
$secondary-color: #10b981;
$breakpoint-md: 768px;
$spacing-unit: 8px;

@mixin flex-center($direction: row) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: $direction;
}

@function calculate-rem($px) {
  @return $px / 16px * 1rem;
}

// Nested selectors with & parent reference
.button {
  padding: calculate-rem(12px) calculate-rem(24px);
  border-radius: $spacing-unit / 2;
  background-color: $primary-color;
  color: white;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: darken($primary-color, 10%);
  }

  &--secondary {
    background-color: $secondary-color;

    &:hover {
      background-color: lighten($secondary-color, 5%);
    }
  }

  &__icon {
    margin-right: $spacing-unit / 2;
  }
}

// Loop with @each
$themes: (light: #ffffff, dark: #1e293b);

@each $name, $bg in $themes {
  .theme-#{$name} {
    background-color: $bg;
  }
}

// Media query nesting
.container {
  max-width: 1200px;
  margin: 0 auto;

  @media (min-width: $breakpoint-md) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calculate-rem(16px);
  }
}