$base: 4px;
$primary: #f43f5e;

.element {
  padding: $base * 4; // 16px
  margin: $base * 2 $base * 3; // 8px 12px
  width: 100% - 20px;
  color: $primary;
}

.card {
  padding: 16px;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  &--featured {
    border: 2px solid gold;
  }
  &__title {
    font-size: 24px;
  }

  .icon {
    margin-right: 8px;
    &.left {
      margin-left: 0;
    }
  }
}

@mixin button($bg, $color: white, $radius: 4px) {
  background: $bg;
  color: $color;
  border-radius: $radius;
  border: none;
  cursor: pointer;

  &:hover {
    background: darken($bg, 10%);
  }
}

.btn-primary {
  @include button(#f43f5e);
}
.btn-secondary {
  @include button(#6366f1, white, 8px);
}

@function rem($px) {
  @return #{$px / 16}rem;
}

@function spacing($n) {
  @return 4px * $n;
}

.text {
  font-size: #{rem(18)}; // 1.125rem
  padding: spacing(4); // 16px
  margin-bottom: spacing(6); // 24px
}

// Generate utility classes
@for $i from 1 through 8 {
  .gap-#{$i} {
    gap: #{$i * 4}px;
  }
  .p-#{$i} {
    padding: #{$i * 4}px;
  }
  .m-#{$i} {
    margin: #{$i * 4}px;
  }
}

// Iterate maps
$colors: (
  primary: #f43f5e,
  success: #22c55e,
  warning: #f59e0b,
);

@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }
  .bg-#{$name} {
    background: $color;
    &:hover {
      background: darken($color, 10%);
    }
  }
}

@mixin theme($mode) {
  @if $mode == dark {
    background: #0a0a0a;
    color: #fafafa;
  } @else if $mode == light {
    background: #ffffff;
    color: #0a0a0a;
  } @else {
    background: inherit;
  }
}

.panel {
  @include theme(dark);
}

$brand: #f43f5e;

.palette {
  --light: #{lighten($brand, 20%)};
  --dark: #{darken($brand, 20%)};
  --muted: #{desaturate($brand, 30%)};
  --complement: #{complement($brand)};
  --mix: #{mix($brand, #3b82f6, 50%)};
  --transparent: #{rgba($brand, 0.5)};
}

$prop: margin;
$side: top;
$i: 5;

.item {
  #{$prop}-#{$side}: 10px;
}

.col-#{$i} {
  width: percentage($i / 12);
}

[data-count="#{$i * 10}"] {
  content: "#{$i} items";
}