@use "../tokens/color";
@use "sass:map";
@use "sass:string";

@layer utilities {
  // Background utilities
  @each $name, $value in color.$colors-light {
    @if string.index($name, "background-") == 1 {
      .#{$name} {
        background-color: var(--color-#{$name}) !important;
      }
    }
  }

  // Surface utilities
  @each $name, $value in color.$colors-light {
    @if string.index($name, "surface-") == 1 {
      .#{$name} {
        background-color: var(--color-#{$name}) !important;
      }
    }
  }

  // Fill utilities
  @each $name, $value in color.$colors-light {
    @if string.index($name, "fill-") == 1 {
      .#{$name} {
        background-color: var(--color-#{$name}) !important;
      }
    }
  }

  // Border utilities
  @each $name, $value in color.$colors-light {
    @if string.index($name, "border-") == 1 {
      .#{$name} {
        border-color: var(--color-#{$name}) !important;
      }
    }
  }

  // Text color utilities
  @each $name, $value in color.$colors-light {
    @if string.index($name, "text-") == 1 {
      .#{$name} {
        color: var(--color-#{$name}) !important;
      }
    }
  }

  // Icon color utilities
  @each $name, $value in color.$colors-light {
    @if string.index($name, "icon-") == 1 {
      .#{$name} {
        color: var(--color-#{$name}) !important;
      }
    }
  }

  .surface-secondary,
  .surface-tertiary {
    &::selection {
      background-color: var(--color-background-contrast);
      color: var(--color-text-inverse);
    }
  }

  // Utility for removing background
  .background-none {
    background: none !important;
  }
}