@use "sass:map";

.vuiBadge {
  display: inline-block;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
}

.vuiBadge--l {
  font-size: $fontSizeMedium;
  line-height: 1.25;
  padding: $sizeXs $sizeS;
  border-radius: $sizeL;
}

.vuiBadge--m {
  font-size: $fontSizeSmall;
  line-height: 1.25;
  padding: $sizeXxs $sizeXs;
  border-radius: $sizeS;
}

.vuiBadge--s {
  font-size: $fontSizeXsmall;
  line-height: 1.25;
  padding: $sizeXxxs $sizeXs;
  border-radius: $sizeS;
}

.vuiBadge--clickable {
  cursor: pointer;
}

.vuiBadge__icon {
  padding: 0px !important;
  height: min-content !important;
}

.vuiBadge__content {
  // text-overflow doesn't work on flexbox elements.
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// Color
$color: (
  accent: (
    "color": var(--vui-color-accent-shade),
    "background-color": rgba(var(--vui-color-accent-shade-rgb), 0.1),
    "border-color": rgba(var(--vui-color-accent-shade-rgb), 0.1)
  ),
  primary: (
    "color": var(--vui-color-primary-shade),
    "background-color": rgba(var(--vui-color-primary-shade-rgb), 0.1),
    "border-color": rgba(var(--vui-color-primary-shade-rgb), 0.1)
  ),
  success: (
    "color": var(--vui-color-success-shade),
    "background-color": rgba(var(--vui-color-success-shade-rgb), 0.1),
    "border-color": rgba(var(--vui-color-success-shade-rgb), 0.1)
  ),
  warning: (
    "color": var(--vui-color-warning-shade),
    "background-color": rgba(var(--vui-color-warning-shade-rgb), 0.1),
    "border-color": rgba(var(--vui-color-warning-shade-rgb), 0.1)
  ),
  danger: (
    "color": var(--vui-color-danger-shade),
    "background-color": rgba(var(--vui-color-danger-shade-rgb), 0.1),
    "border-color": rgba(var(--vui-color-danger-shade-rgb), 0.1)
  ),
  neutral: (
    "color": var(--vui-color-text),
    "background-color": var(--vui-color-light-shade),
    "border-color": rgba(var(--vui-color-text-rgb), 0.1)
  )
);

@each $colorName, $colorValue in $color {
  .vuiBadge--#{$colorName} {
    color: #{map.get($colorValue, "color")} !important;
    background-color: #{map.get($colorValue, "background-color")};
    border: 1px solid transparent;
    transition: all $transitionSpeed;

    &.vuiBadge--clickable:hover {
      border-color: #{map.get($colorValue, "color")};
      text-decoration: none;
    }
  }
}