chip.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-chip-background-color: Specifies the background color of the component.
 * @prop --calcite-chip-border-color: Specifies the border color of the component.
 * @prop --calcite-chip-shadow: Specifies the shadow of the component.
 * @prop --calcite-chip-corner-radius: Specifies the corner radius of the component.
 * @prop --calcite-chip-icon-color: Specifies the color of the component's icon property.
 * @prop --calcite-chip-text-color: Specifies the color of the component's `"default"` slot.
 * @prop --calcite-chip-close-icon-color: Specifies the icon color of the component's `closable` element.
 * @prop --calcite-chip-close-background-color: Specifies the background color of the component's `closable` element.
 * @prop --calcite-chip-close-background-color-hover: Specifies the hover background color of the component's `closable` element when hovered.
 * @prop --calcite-chip-close-background-color-active: Specifies the active background color of the component's `closable` element when active.
 * @prop --calcite-chip-close-background-color-focus: Specifies the focus background color of the component's `closable` element when focused.
 * @prop --calcite-chip-close-border-color-focus Specifies the focus outline color of the component's `closable` element.
 * @prop --calcite-chip-select-icon-color: Specifies the color of the component's select icon
 *
 */

/**
  * Local props
  * These properties are intended for internal component use only. It is not recommended that these properties be overwritten.
  *
  * --calcite-internal-chip-spacing-s
  * --calcite-internal-chip-spacing-l
  * --calcite-internal-chip-icon-size
  * --calcite-internal-chip-image-size
  * --calcite-internal-chip-container-size
*/

:host {
  @apply inline-flex;
}

:host([scale="s"]) {
  @apply text-n2;
  --calcite-internal-chip-spacing-s: var(--calcite-spacing-xxs);
  --calcite-internal-chip-spacing-l: var(--calcite-spacing-sm);
  --calcite-internal-chip-icon-size: var(--calcite-size-lg);
  --calcite-internal-chip-image-size: var(--calcite-size-xl);
  --calcite-internal-chip-container-size: var(--calcite-size-xxl);
}

:host([scale="m"]) {
  @apply text-n1;
  --calcite-internal-chip-spacing-s: var(--calcite-spacing-xs);
  --calcite-internal-chip-spacing-l: var(--calcite-spacing-sm);
  --calcite-internal-chip-icon-size: var(--calcite-size-xxl);
  --calcite-internal-chip-image-size: var(--calcite-size-xxl);
  --calcite-internal-chip-container-size: var(--calcite-size-xxxl);
}

:host([scale="l"]) {
  @apply text-0;
  --calcite-internal-chip-spacing-s: var(--calcite-spacing-sm);
  --calcite-internal-chip-spacing-l: var(--calcite-spacing-md);
  --calcite-internal-chip-icon-size: var(--calcite-size-xxxl);
  --calcite-internal-chip-image-size: var(--calcite-size-xxxl);
  --calcite-internal-chip-container-size: 44px;
}

.container {
  @apply inline-flex
  items-center
  focus-base
  justify-center
  cursor-default
  box-border
  font-medium;
  max-inline-size: var(--calcite-container-size-content-fluid);
  border: var(--calcite-border-width-sm) solid var(--calcite-chip-border-color, var(--calcite-color-border-3));
  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
  border-radius: var(--calcite-chip-corner-radius, 9999px);
  background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-2));
  box-shadow: var(--calcite-chip-shadow, var(--calcite-shadow-none));
  block-size: var(--calcite-internal-chip-container-size);
  &.is-circle {
    inline-size: var(--calcite-internal-chip-container-size);
  }
  &:not(.is-circle) {
    padding-inline: var(--calcite-internal-chip-spacing-s);
  }
  &.selectable {
    @apply cursor-pointer;
  }
  &:not(.non-interactive):focus {
    @apply focus-outset;
  }
}

:host([appearance="outline-fill"]) .container {
  background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-1));
}

:host([appearance="outline"]) .container {
  background-color: var(--calcite-chip-background-color, transparent);
}

:host([kind="neutral"]) .container {
  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
  .close calcite-icon {
    --calcite-icon-color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-3));
  }
  .chip-icon {
    --calcite-icon-color: var(--calcite-chip-icon-color, var(--calcite-color-text-1));
  }
}

:host([kind="neutral"][appearance="solid"]) .container {
  border-color: var(--calcite-chip-border-color, transparent);
}

:host([kind="neutral"][appearance="outline-fill"]) .container,
:host([kind="neutral"][appearance="outline"]) .container {
  border-color: var(--calcite-chip-border-color, var(--calcite-color-border-1));
}

:host([kind="inverse"]) .container .chip-icon {
  --calcite-icon-color: var(--calcite-chip-icon-color, var(--calcite-color-text-inverse));
}

:host([kind="inverse"][appearance="solid"]) .container {
  background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse));
  border-color: var(--calcite-chip-border-color, transparent);
  color: var(--calcite-chip-text-color, var(--calcite-color-text-inverse));
  .close calcite-icon {
    --calcite-icon-color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-inverse));
  }
}

:host([kind="inverse"][appearance="outline-fill"]) .container,
:host([kind="inverse"][appearance="outline"]) .container {
  border-color: var(--calcite-chip-border-color, var(--calcite-color-inverse));
  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
  .chip-icon {
    --calcite-icon-color: var(--calcite-chip-icon-color, var(--calcite-color-inverse));
  }
}

:host([kind="brand"]) .container .chip-icon {
  --calcite-icon-color: var(--calcite-chip-icon-color, var(--calcite-color-text-inverse));
}

:host([kind="brand"][appearance="solid"]) .container {
  background-color: var(--calcite-chip-background-color, var(--calcite-color-brand));
  border-color: var(--calcite-chip-border-color, transparent);
  color: var(--calcite-chip-text-color, var(--calcite-color-text-inverse));
  .close calcite-icon {
    --calcite-icon-color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-inverse));
  }
}

:host([kind="brand"][appearance="outline-fill"]) .container,
:host([kind="brand"][appearance="outline"]) .container {
  border-color: var(--calcite-chip-border-color, var(--calcite-color-brand));
  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
  .chip-icon {
    --calcite-icon-color: var(--calcite-chip-icon-color, var(--calcite-color-inverse));
  }
}

:host([kind="brand"][appearance="solid"]) .container,
:host([kind="inverse"][appearance="solid"]) .container {
  .close:focus {
    outline-color: var(--calcite-chip-close-border-color-focus, var(--calcite-color-text-inverse));
  }
}

:host([scale="s"]) .container.image--slotted {
  padding-inline-start: calc(var(--calcite-internal-chip-spacing-s) / 2);
}

:host([scale="s"]) .container.is-circle {
  padding-inline: 0;
}

.container.text--slotted .title {
  @apply truncate;
  padding-inline: var(--calcite-internal-chip-spacing-s);
}

.container:not(.text--slotted) .title {
  display: none;
}

.container:not(.image--slotted) .image-container {
  display: none;
}

.container.closable {
  padding-inline-end: calc(var(--calcite-internal-chip-spacing-l) / 2);
}

.container:not(.is-circle) {
  &.image--slotted {
    padding-inline-start: calc(var(--calcite-internal-chip-spacing-l) / 2);
  }

  &.image--slotted .image-container {
    margin-inline-end: var(--calcite-internal-chip-spacing-s);
  }

  &.image--slotted .image-container ~ .chip-icon {
    margin-inline-start: var(--calcite-internal-chip-spacing-s);
  }

  &.selectable:not(.text--slotted) .chip-icon {
    margin-inline-end: var(--calcite-internal-chip-spacing-s);
  }

  &:not(.selectable):not(.text--slotted) .chip-icon {
    margin-inline-start: var(--calcite-internal-chip-spacing-s);
  }

  &:not(.text--slotted) .chip-icon {
    margin-inline-end: var(--calcite-internal-chip-spacing-s);
  }

  &:not(.text-slotted).image--slotted .image-container {
    margin-inline-end: var(--calcite-internal-chip-spacing-s);
  }

  &:not(.closable):not(.text--slotted).image--slotted.selectable .image-container {
    margin-inline-end: 0;
    ~ .chip-icon {
      margin-inline-start: calc(var(--calcite-internal-chip-spacing-s) * 2);
    }
  }
}

.chip-icon {
  @apply relative my-0 inline-flex duration-150 ease-in-out;
  margin-inline: var(--calcite-internal-chip-spacing-s);
}

.image-container {
  @apply inline-flex overflow-hidden;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  block-size: var(--calcite-internal-chip-image-size);
  inline-size: var(--calcite-internal-chip-image-size);
}

.close {
  @apply focus-base
    transition-default
    cursor-pointer
    items-center
    border-none;
  -webkit-appearance: none;
  display: flex;
  border-radius: var(--calcite-chip-corner-radius, 9999px);
  align-content: center;
  justify-content: center;
  margin: 0;
  block-size: var(--calcite-internal-chip-icon-size);
  inline-size: var(--calcite-internal-chip-icon-size);
  background-color: var(--calcite-chip-close-background-color, var(--calcite-color-transparent));
  &:hover {
    background-color: var(--calcite-chip-close-background-color-hover, var(--calcite-color-transparent-hover));
  }
  &:focus {
    background-color: var(--calcite-chip-close-background-color-focus, var(--calcite-color-transparent-hover));
    @apply focus-inset;
    outline-color: var(--calcite-chip-close-border-color-focus, var(--calcite-color-brand));
  }
  &:active {
    background-color: var(--calcite-chip-close-background-color-active, var(--calcite-color-transparent-press));
  }

  calcite-icon {
    --calcite-icon-color: color: var(--calcite-chip-close-icon-color, var(--calcite-color-text-3));
  }
}

.select-icon {
  align-self: center;
  justify-content: center;
  align-items: center;
  display: flex;
  inset-block-start: -1px;
  position: relative;
  visibility: hidden;
  inline-size: 0;
  opacity: 0;
  transition:
    opacity 0.15s ease-in-out,
    inline-size 0.15s ease-in-out;

  &--active {
    block-size: var(--calcite-internal-chip-icon-size);
    inline-size: var(--calcite-internal-chip-icon-size);
    visibility: visible;
    opacity: 0.5;
  }

  calcite-icon {
    --calcite-icon-color: var(--calcite-chip-select-icon-color);
  }
}

.container:not(.is-circle).image--slotted .select-icon.select-icon--active {
  margin-inline-end: var(--calcite-internal-chip-spacing-s);
}

:host([selected]) .select-icon {
  opacity: 1;
}

.container:hover .select-icon--active {
  opacity: 1;
}

slot[name="image"]::slotted(*) {
  @apply rounded-half flex h-full w-full overflow-hidden;
}

:host([closed]) {
  display: none;
}

@include disabled();
@include base-component();