// Variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$dark-mode: true;
$spacing-unit: 8px;
$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px,
  xlarge: 1200px
);

// Functions
@function calculate-width($columns, $total: 12) {
  @return percentage($columns / $total);
}

// Mixins
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin responsive($breakpoint) {
  $size: map-get($breakpoints, $breakpoint);
  @if $size {
    @media (min-width: $size) {
      @content;
    }
  }
}

// Theme mixin with conditional logic
@mixin theme-colors {
  @if $dark-mode {
    background-color: #222;
    color: #fff;
  } @else {
    background-color: #fff;
    color: #222;
  }
}

// Generate spacing classes with loops
$space-amounts: (1, 2, 3, 4, 5);
@each $space in $space-amounts {
  .m-#{$space} {
    margin: $spacing-unit * $space;
  }
  .p-#{$space} {
    padding: $spacing-unit * $space;
  }
}

// Main styles with nesting
.container {
  max-width: 1200px;
  margin: 0 auto;
  @include theme-colors;
  
  // Grid system with functions
  .row {
    display: flex;
    flex-wrap: wrap;
    
    @for $i from 1 through 12 {
      .col-#{$i} {
        width: calculate-width($i);
      }
    }
  }
  
  // Header with nesting and parent selector
  .header {
    @include flex-center;
    background-color: $primary-color;
    padding: $spacing-unit * 2;
    
    &:hover {
      background-color: darken($primary-color, 10%);
    }
    
    // Responsive styles
    @include responsive(medium) {
      padding: $spacing-unit * 3;
    }
    
    // Logo with extending
    .logo {
      font-size: 24px;
      font-weight: bold;
    }
  }
  
  // Button component with extending
  %button-base {
    padding: $spacing-unit $spacing-unit * 2;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .button-primary {
    @extend %button-base;
    background-color: $primary-color;
    color: white;
    
    &:hover {
      background-color: darken($primary-color, 15%);
    }
  }
  
  .button-secondary {
    @extend %button-base;
    background-color: $secondary-color;
    color: white;
    
    &:hover {
      background-color: darken($secondary-color, 15%);
    }
  }
}