// @gruapl/icons button base styles.
//
// This module provides icon component integration for the button component.
//
// It sets the `--graupl-icon-color` custom property to the appropriate `--graupl-button-color` property.
//
// The following selectors are generated by default:
// - `.button`: The button component.
//
// The following custom properties control the generated selectors:
// - N/A
//
// The following variables control the generated selectors:
// - N/A
//
// @example
// <button class="button icon-after">Button</button>

@use "pkg:@graupl/core/src/defaults" as root-defaults;
@use "pkg:@graupl/core/src/base/button/defaults" as button-defaults;
@use "pkg:@graupl/core/src/base/button/variables" as button;
@use "pkg:@graupl/core/src/mixins/layer" as *;
@use "pkg:@graupl/core/src/mixins/theme";
@use "../../component/icon/mixins" as icon;
@use "../../component/icon/defaults" as icon-defaults;
@use "variables" as *;

@include layer(theme) {
  // .button
  #{button-defaults.$button-selector-base}#{button-defaults.$button-selector} {
    // &.icon, &.icon-before, &.icon-after
    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-selector},
    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-before-selector},
    &#{icon-defaults.$icon-selector-base}#{icon-defaults.$icon-after-selector} {
      @include icon.bind(button.$button-color, button.$button-color-states);

      @if root-defaults.$themeable-components and button-defaults.$themeable {
        @each $color, $map in button-defaults.$button-theme-map {
          // &.primary, &.secondary, &.tertiary
          &#{button-defaults.$button-theme-selector-base}#{button-defaults.$button-theme-selector-prefix}#{$color} {
            @include icon.bind(
              button.$button-color,
              button.$button-color-states
            );
          }
        }
      }
    }
  }
}