// Lightning Design System 2.24.3
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @summary Container for icons
 *
 * @name base
 * @selector .slds-icon_container
 * @restrict span, div
 * @notes Used when an icon with a background color is accompanied by `.slds-assistive-text` and also receives a `background-color` class
 * @support dev-ready
 * @variant
 */
.slds-icon_container,
.slds-icon__container {
  @include deprecate('4.0.0', 'slds-icon__container is deprecated. Use slds-icon_container instead.');
  display: inline-block;
  border-radius: var(--slds-c-icon-radius-border, var(--sds-c-icon-radius-border, $border-radius-medium));
  line-height: $line-height-reset;
  background-color: var(--slds-c-icon-color-background, var(--sds-c-icon-color-background, transparent));
}

/**
 * @summary Circle container for icons
 * @selector .slds-icon_container_circle
 * @restrict .slds-icon_container
 */
.slds-icon_container_circle,
.slds-icon__container_circle,
.slds-icon_container--circle,
.slds-icon__container--circle {
  /*! @css-var-fallback border-radius */
  --slds-c-icon-radius-border: #{$border-radius-circle};
  padding: $spacing-x-small;
}

/**
* @summary Horizontally flip icons
* @selector .slds-icon_flip
* @ restrict .slds-icon_container
*/
.slds-icon_flip {
  @include rtl() {
    transform: scaleX(-1);
  }
}

// All action icon classes in one string. This is faster for style calculation than `[class*='slds-icon-action-']`.
/// @private
@function action-icons() {
  $result: '';
  @each $name in map-keys($bg-actions-map) {
    $result: "#{$result}, .slds-icon-#{$name}";
  }
  @return str-slice($result, 3); // Remove initial ", "
}

#{action-icons()} {
  padding: $spacing-x-small;
  border-radius: $border-radius-circle;
}
// action-{icon-name} comes from the map
@each $name, $color in $bg-actions-map {

  .slds-icon-#{$name} {
    background-color: var(--slds-c-icon-color-background, var(--sds-c-icon-color-background, $color));
  }
}


// TODO: Depend on a correct map to generate icons named slds-icon-custom-customXX
@each $name, $color in $bg-custom-map {
  $prefix-length: str-length('custom-');
  // In Sass, str-slice's first character is 1 (instead of 0 in other languages)
  // so we need to add +1 when slicing
  $id: str-slice($name, $prefix-length + 1);

  // We generate both icons named:
  // 1. slds-icon-custom-customXX (new: consistent with icon names)
  // 2. slds-icon-custom-XX (legacy: depends on a map that is inconsistent with icon names)
  @include deprecate('4.0.0', 'slds-icon-custom-XX classes are deprecated, use slds-icon-custom-customXX instead');

  .slds-icon-custom-custom#{$id},
  .slds-icon-#{$name} {
    background-color: var(--slds-c-icon-color-background, var(--sds-c-icon-color-background, $color));
    color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse}); // This is for text based icon created with just the first letters of the words
  }
}

@include deprecate('3.0.0', 'This should be fixed at Theo’s level');
$task2-monkey-patch: (
  // The icon name is task2 but we had it as task-2
  // (with an extra hyphen) so we're monkey patching the CSS to include the
  // legacy token name in the CSS
  'task-2': map-get($bg-standard-map, 'task2')
);

$bg-standard-map: map-merge($task2-monkey-patch, $bg-standard-map);

@each $name, $color in $bg-standard-map {

  .slds-icon-standard-#{$name} {
    background-color: var(--slds-c-icon-color-background, var(--sds-c-icon-color-background, $color));
  }
}

/**
 * @selector .slds-icon
 * @restrict .slds-icon_container svg, svg
 */
.slds-icon {
  @include square($square-icon-medium-boundary);
  fill: var(--slds-c-icon-color-foreground,
    var(--sds-c-icon-color-foreground, var(--slds-g-color-neutral-base-100, #{$color-text-icon-inverse})));
}

// Crispy
// NOTE: It's unclear what this is for, or what "Crispy" means, but with Styling Hooks in place it seems to round the *icon glyph* instead of just the container
// [class*='slds-icon-standard-'],
// [class*='slds-icon-action-'],
// [class*='slds-icon-custom-'] {

//   .slds-icon,
//   &.slds-icon {
//     border-radius: var(--slds-c-icon-radius-border, var(--sds-c-icon-radius-border, $border-radius-medium));
//   }
// }

/**
 * @selector .slds-icon_xx-small
 * @restrict .slds-icon
 * @modifier
 * @group size
 */
.slds-icon_xx-small,
.slds-icon--xx-small {
  @include square($square-icon-xx-small-content);
  line-height: $line-height-reset;
}

/**
 * @selector .slds-icon_x-small
 * @restrict .slds-icon, .slds-button__icon
 * @modifier
 * @group size
 */
.slds-icon_x-small,
.slds-icon--x-small {
  @include square($square-icon-utility-small);
  line-height: $line-height-reset;
}


/**
 * @selector .slds-icon_small
 * @restrict .slds-icon
 * @modifier
 * @group size
 */
.slds-icon_small,
.slds-icon--small {
  @include square($square-icon-small-boundary);
  line-height: $line-height-reset;
}

/**
 * @selector .slds-icon_large
 * @restrict .slds-icon
 * @modifier
 * @group size
 */
.slds-icon_large,
.slds-icon--large {
  @include square($square-icon-large-boundary);
}

/**
 * @summary Changes the icon fill color to match the default state
 *
 * @selector .slds-icon-text-default
 * @restrict .slds-icon
 * @modifier
 * @group color
 */
.slds-icon-text-default {
  /*! @css-var-fallback fill */
  --slds-c-icon-color-foreground: var(--slds-c-icon-color-foreground-default, var(--sds-c-icon-color-foreground-default, var(--slds-g-color-neutral-base-50, #{$color-text-icon-default})));

  /**
  * @summary Changes the icon fill color to match the disabled state
  *
  * @selector .slds-is-disabled
  * @restrict .slds-icon
  * @modifier
  * @group color
  */
  &.slds-is-disabled {
    fill: var(--slds-g-color-neutral-base-80, #{$color-text-icon-default-disabled});
  }
}

/**
* @summary Changes the icon fill color to match the warning state
*
* @selector .slds-icon-text-warning
* @restrict .slds-icon
* @modifier
* @group color
*/
.slds-icon-text-warning {
  /*! @css-var-fallback fill */
  --slds-c-icon-color-foreground: var(--slds-g-color-warning-base-50, #{$color-text-warning});
}

/**
* @summary Changes the icon fill color to match the success state
*
* @selector .slds-icon-text-success
* @restrict .slds-icon
* @modifier
* @group color
*/
.slds-icon-text-success {
  /*! @css-var-fallback fill */
  --slds-c-icon-color-foreground: var(--slds-g-color-success-base-50, #{$color-text-success});
}

/**
* @summary Changes the icon fill color to match the error state
*
* @selector .slds-icon-text-error
* @restrict .slds-icon
* @modifier
* @group color
*/
.slds-icon-text-error {
  /*! @css-var-fallback fill */
  --slds-c-icon-color-foreground: var(--slds-g-color-error-base-40, #{$color-text-error});
}

/**
* @selector .slds-icon-text-light
* @restrict .slds-icon, svg
* @modifier
* @group color
*/
.slds-icon-text-light {
  /*! @css-var-fallback fill */
  --slds-c-icon-color-foreground: var(--slds-g-color-neutral-base-50, #{$color-text-input-icon});
}

/**
 * @selector .slds-current-color
 * @restrict .slds-icon_container
 * @modifier
 * @group color
 */
.slds-current-color {

  .slds-icon {
    /*! @css-var-fallback fill */
    --slds-c-icon-color-foreground: currentColor;
  }
}

/**
 * The icon container of icon in a disabled element
 *
 * @selector .slds-icon_disabled
 * @restrict .slds-icon_container
 */
.slds-icon_disabled {
  background-color: currentColor;
}