/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

//
// BADGE COMPONENT
//

@use "sass:map";

$hds-badge-types: ("flat", "inverted", "outlined");
$hds-badge-colors-accents: ("highlight", "success", "warning", "critical");
$hds-badge-sizes: ("small", "medium", "large");
$hds-badge-border-width: 1px;
$hds-badge-colors-props: (
  "highlight": (
    "inverted-background-color": var(--token-color-palette-purple-200),
    "outlined-border-color": var(--token-color-palette-purple-200),
  ),
  "success": (
    "inverted-background-color": var(--token-color-palette-green-200),
    "outlined-border-color": var(--token-color-palette-green-200),
  ),
  "warning": (
    "inverted-background-color": var(--token-color-palette-amber-200),
    "outlined-border-color": var(--token-color-palette-amber-200),
  ),
  "critical": (
    "inverted-background-color": var(--token-color-palette-red-200),
    "outlined-border-color": var(--token-color-palette-red-200),
  ),
);

.hds-badge {
  // Redefine color values to increase contrast
  --token-color-surface-success: var(--token-color-palette-green-100);
  --token-color-foreground-success-on-surface: var(--token-color-palette-green-400);
  --token-color-surface-warning: var(--token-color-palette-amber-100);
  --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-400);
  --token-color-surface-critical: var(--token-color-palette-red-100);
  --token-color-foreground-critical-on-surface: var(--token-color-palette-red-400);
  --token-color-surface-highlight: var(--token-color-palette-purple-100);
  --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-400);

  display: inline-flex;
  align-items: center;
  max-width: 100%;
  vertical-align: middle;
  border: $hds-badge-border-width solid transparent;
  border-radius: var(--token-border-radius-small);
}

.hds-badge__icon {
  display: block;
  flex: 0 0 auto;
}

.hds-badge__text {
  flex: 1 0 0;
  font-weight: var(--token-typography-font-weight-medium);
  font-family: var(--token-typography-font-stack-text);
}

// SIZE

// these values later may come from the design tokens
$hds-badge-size-props: (
  "small": (
    // 13px = 0.8125rem
    "font-size": 0.8125rem,
    "gap": 0.25rem,
    "height": 1.25rem,
    "icon-size": 0.75rem,
    // 16px = 1.2308
    "line-height": 1.2308,
    "padding-vertical": 0.125rem,
    "padding-horizontal": 0.375rem,
  ),
  "medium": (
    // 13px = 0.8125rem
    "font-size": 0.8125rem,
    "gap": 0.25rem,
    "height": 1.5rem,
    "icon-size": 1rem,
    // 16px = 1.2308
    "line-height": 1.2308,
    "padding-vertical": 0.25rem,
    "padding-horizontal": 0.5rem,
  ),
  "large": (
    // 16px = 1rem
    "font-size": 1rem,
    "gap": 0.375rem,
    "height": 2rem,
    "icon-size": 1rem,
    // 24px = 1.5
    "line-height": 1.5,
    "padding-vertical": 0.25rem,
    "padding-horizontal": 0.5rem,
  ),
);

@each $size in $hds-badge-sizes {
  .hds-badge--size-#{$size} {
    gap: map.get($hds-badge-size-props, $size, "gap");
    min-height: map.get($hds-badge-size-props, $size, "height");
    padding: calc(#{map.get($hds-badge-size-props, $size, "padding-vertical")} - #{$hds-badge-border-width})
      calc(#{map.get($hds-badge-size-props, $size, "padding-horizontal")} - #{$hds-badge-border-width});

    .hds-badge__icon {
      width: map.get($hds-badge-size-props, $size, "icon-size");
      height: map.get($hds-badge-size-props, $size, "icon-size");
    }

    .hds-badge__text {
      font-size: map.get($hds-badge-size-props, $size, "font-size");
      line-height: map.get($hds-badge-size-props, $size, "line-height");
    }
  }
}

// COLOR + TYPE COMBINATIONS

.hds-badge--color-neutral {
  &.hds-badge--type-filled {
    color: var(--token-color-foreground-primary);
    background-color: var(--token-color-palette-neutral-200);
  }

  &.hds-badge--type-inverted {
    color: var(--token-color-foreground-high-contrast);
    background-color: var(--token-color-palette-neutral-500);
  }

  &.hds-badge--type-outlined {
    color: var(--token-color-foreground-primary);
    background-color: transparent;
    border-color: var(--token-color-palette-neutral-500);
  }
}

.hds-badge--color-neutral-dark-mode {
  &.hds-badge--type-filled {
    color: var(--token-color-foreground-high-contrast);
    background-color: var(--token-color-palette-neutral-500);
  }

  &.hds-badge--type-inverted {
    color: var(--token-color-foreground-primary);
    background-color: var(--token-color-surface-faint);
  }

  &.hds-badge--type-outlined {
    color: var(--token-color-foreground-high-contrast);
    background-color: transparent;
    border-color: var(--token-color-palette-neutral-50);
  }
}

@each $color in $hds-badge-colors-accents {
  .hds-badge--color-#{$color} {
    &.hds-badge--type-filled {
      color: var(--token-color-foreground-#{$color}-on-surface);
      background-color: var(--token-color-surface-#{$color});
    }

    &.hds-badge--type-inverted {
      color: var(--token-color-foreground-high-contrast);
      background-color: map.get($hds-badge-colors-props, $color, "inverted-background-color");
    }

    &.hds-badge--type-outlined {
      color: var(--token-color-foreground-#{$color});
      background-color: transparent;
      border-color: map.get($hds-badge-colors-props, $color, "outlined-border-color");
    }
  }
}