@use "sass:map";

.vuiIcon {
  display: inline-block;
  // Remove extra space at bottom of icon.
  line-height: 0;
}

.vuiIcon--inline {
  display: inline-block;
}

$color: (
  accent: (
    "icon": var(--vui-color-accent-shade),
    "fill": var(--vui-color-accent-shade),
    "token": var(--vui-color-accent-lighter-shade)
  ),
  primary: (
    "icon": var(--vui-color-primary-shade),
    "fill": var(--vui-color-primary-shade),
    "token": var(--vui-color-primary-lighter-shade)
  ),
  success: (
    "icon": var(--vui-color-success-shade),
    "fill": var(--vui-color-success-shade),
    "token": var(--vui-color-success-lighter-shade)
  ),
  warning: (
    "icon": var(--vui-color-warning-shade),
    "fill": var(--vui-color-warning-shade),
    "token": var(--vui-color-warning-lighter-shade)
  ),
  danger: (
    "icon": var(--vui-color-danger-shade),
    "fill": var(--vui-color-danger-shade),
    "token": var(--vui-color-danger-lighter-shade)
  ),
  subdued: (
    "icon": var(--vui-color-subdued-shade),
    "fill": var(--vui-color-subdued-shade),
    "token": var(--vui-color-light-shade)
  ),
  neutral: (
    "icon": var(--vui-color-text),
    "fill": var(--vui-color-text),
    "token": var(--vui-color-light-shade)
  ),
  empty: (
    "icon": var(--vui-color-empty-shade),
    "fill": var(--vui-color-full-shade),
    "token": var(--vui-color-darker-shade)
  )
);

$colors: (
  accent: var(--vui-color-accent-shade),
  primary: var(--vui-color-primary-shade),
  success: var(--vui-color-success-shade),
  warning: var(--vui-color-warning-shade),
  danger: var(--vui-color-danger-shade),
  subdued: var(--vui-color-subdued-shade),
  neutral: var(--vui-color-text),
  empty: #ffffff
);

$tokenColors: (
  accent: var(--vui-color-accent-lighter-shade),
  primary: var(--vui-color-primary-lighter-shade),
  success: var(--vui-color-success-lighter-shade),
  warning: var(--vui-color-warning-lighter-shade),
  danger: var(--vui-color-danger-lighter-shade),
  subdued: var(--vui-color-medium-shade),
  neutral: var(--vui-color-dark-shade),
  empty: #ffffff
);

.vuiIcon--default {
  @each $colorName, $colorValue in $color {
    &.vuiIcon--#{$colorName} {
      .vuiIcon__inner {
        color: #{map.get($colorValue, "icon")};
      }
    }
  }
}

.vuiIcon--enclosed {
  border-radius: 100%;
  padding: $sizeS;

  @each $colorName, $colorValue in $color {
    &.vuiIcon--#{$colorName} {
      background-color: #{map.get($colorValue, "fill")};

      .vuiIcon__inner {
        color: var(--vui-color-empty-shade);
      }
    }
  }
}

.vuiIcon--token {
  border-radius: 100%;
  padding: $sizeXxxs;

  @each $colorName, $colorValue in $color {
    &.vuiIcon--#{$colorName} {
      background-color: #{map.get($colorValue, "token")};

      .vuiIcon__inner {
        color: #{map.get($colorValue, "icon")};
      }
    }
  }
}