// Variables for default values
$icon-default-size: 24px;
$icon-default-color: currentColor;

// Base icon properties
@mixin icon-base {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

// Icon sizes
@mixin icon-size($size: $icon-default-size) {
  width: $size;
  height: $size;
  min-width: $size;
  min-height: $size;
}

// Mask-based icon (for customizable colors)
@mixin icon-mask($icon-path, $color: $icon-default-color) {
  @include icon-base;
  background-color: $color;
  mask-image: url($icon-path);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url($icon-path);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

// Regular background icon (for flags or multi-colored icons)
@mixin icon-bg($icon-path) {
  @include icon-base;
  background-image: url($icon-path);
}

// Icon with hover color
@mixin icon-hover($color) {
  &:hover {
    background-color: $color;
  }
}

// Icon with transition
@mixin icon-transition($duration: 0.2s) {
  transition: all $duration ease-in-out;
}

// Icon with rotation
@mixin icon-rotate($degrees) {
  transform: rotate($degrees);
}

// Responsive icon size with optional colors
@mixin icon-responsive(
  $sm: 16px,
  $md: 24px,
  $lg: 32px,
  $color: $icon-default-color
) {
  @include icon-size($sm);
  background-color: $color;

  @media (min-width: 768px) {
    @include icon-size($md);
  }

  @media (min-width: 1024px) {
    @include icon-size($lg);
  }
}

// Complete icon setup with all options
@mixin icon-complete($icon-path, $options: ()) {
  $default-options: (
    size: $icon-default-size,
    color: $icon-default-color,
    hover-color: null,
    transition: 0.2s,
    rotate: 0deg,
    responsive: false,
  );

  $settings: map-merge($default-options, $options);

  @include icon-mask($icon-path, map-get($settings, color));

  @if map-get($settings, responsive) == true {
    @include icon-responsive(
      $sm: map-get($settings, size) * 0.75,
      $md: map-get($settings, size),
      $lg: map-get($settings, size) * 1.25,
      $color: map-get($settings, color)
    );
  } @else {
    @include icon-size(map-get($settings, size));
  }

  @if map-get($settings, transition) {
    @include icon-transition(map-get($settings, transition));
  }

  @if map-get($settings, rotate) != 0deg {
    @include icon-rotate(map-get($settings, rotate));
  }

  @if map-get($settings, hover-color) {
    @include icon-hover(map-get($settings, hover-color));
  }
}