@use '../common/variables';
@use '../utilities/text';

// —————————————————————————————————————————————————————————————————
// elements
// color
// dense
// avatar
// close
// disabled
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

.chip {
  @extend %body;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 2rem;
  white-space: nowrap;
  height: 2rem;
  padding: 0 0.75rem;
  transition: variables.$transition-md;
}

// —————————————————————————————————————————————————————————————————
// dense
// —————————————————————————————————————————————————————————————————

.chip-dense {
  @extend %caption;
  height: 1.5rem;
  padding: 0 0.5rem;
  gap: 0.25rem;
}

// —————————————————————————————————————————————————————————————————
// avatar
// —————————————————————————————————————————————————————————————————

.chip_avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  margin-inline-start: -0.5rem;
  object-fit: cover;

  .chip-dense & {
    width: 1rem;
    height: 1rem;
    margin-inline-start: -0.25rem;
  }
}

// —————————————————————————————————————————————————————————————————
// close
// —————————————————————————————————————————————————————————————————

.chip_close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin-inline-end: -0.25rem;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  border-radius: 50%;

  &:hover {
    opacity: 1;
  }

  &:focus { outline: none; }
  &:focus-within { outline: revert; }

  .chip-dense & {
    margin-inline-end: -0.25rem;
  }
}

// —————————————————————————————————————————————————————————————————
// disabled
// —————————————————————————————————————————————————————————————————

.chip-disabled {
  opacity: 0.5;
  pointer-events: none;
}