@use "sass:math";

$chip-default-height: 30px;
$chip-large-height: 50px;

.cobalt- {
  &Chip {
    @apply c-border c-border-outline c-bg-surfaceBright c-transition-colors;

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    height: $chip-default-height;
    max-width: 100%;
    padding: 0;

    border-radius: math.div($chip-default-height, 2);
  }

  &Chip--interactive {
    &:not([disabled]) {
      @apply c-state-interactive;
      cursor: pointer;
    }
  }

  &Chip--large {
    height: $chip-large-height;

    border-radius: math.div($chip-large-height, 2);
  }

  &Chip--large &Chip__Image {
    min-width: $chip-large-height - 2;
    height: $chip-large-height - 2;
  }

  &Chip--large &Chip__Text {
    padding: 0 theme("spacing.sm") 0 theme("spacing.xs");
  }

  &Chip--disabled {
    @apply c-bg-disabled;
    opacity: 0.5;
  }

  &Chip--active {
    @apply c-bg-primaryContainer c-border-onPrimaryContainer;
  }

  &Chip--active &Chip__Text {
    @apply c-text-onPrimaryContainer;
  }

  &Chip__Content {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
  }

  &Chip__Image {
    min-width: $chip-default-height - 2;
    height: $chip-default-height - 2;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    pointer-events: none;
  }

  &Chip__Text {
    @apply c-text-section-heading;

    padding: 0 theme("spacing.xs");

    text-overflow: ellipsis;

    text-align: center;
    pointer-events: none;
  }
}