.nest-chip {
  --chip-bd-color: var(--nest-chip-bd-color, transparent);
  --chip-bg-color: var(--nest-chip-bg-color, rgba(0, 0, 0, 0.05));
  --chip-color: var(--nest-chip-color, #000000);

  --chip-checked-bd-color: var(--nest-chip-checked-bd-color, #000000);
  --chip-checked-bg-color: var(--nest-chip-checked-bg-color, #ffffff);
  --chip-checked-color: var(--nest-chip-checked-color, var(--chip-color));

  --chip-alternate-bd-color: var(--nest-chip-alternate-bd-color, var(--chip-checked-bd-color));
  --chip-alternate-bg-color: var(--nest-chip-alternate-bg-color, var(--chip-checked-bg-color));
  --chip-alternate-color: var(--nest-chip-alternate-color, var(--chip-checked-color));

  --chip-h: var(--nest-chip-h, 40px);
  --chip-px: var(--nest-chip-px, 12px);
  --chip-gap: var(--nest-chip-gap, 4px);
  --chip-fs: var(--nest-chip-fs, 14px);
  --chip-lh: var(--nest-chip-lh, 18px);
  --chip-rad: var(--nest-chip-rad, 6px);
  --chip-icon-size: var(--nest-chip-icon-size, 24px);
  --chip-img-m: var(--nest-chip-img-m, 0px);
  --chip-img-size: var(--nest-chip-img-size, 24px);
  --chip-img-rad: var(--nest-chip-img-rad, 4px);
  --chip-action-size: var(--nest-chip-action-size, 16px);

  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle;
  padding: 0;
  border: 1px solid;
  text-align: left;

  border-color: var(--chip-bd-color);
  background-color: var(--chip-bg-color);
  color: var(--chip-color);

  border-radius: var(--chip-rad);
  font-size: var(--chip-fs);
  line-height: var(--chip-lh);
}

.nest-chip[data-n-dashed] {
  border-style: dashed;
}

.nest-chip[data-n-alternate] {
  --chip-bd-color: var(--chip-alternate-bd-color);
  --chip-bg-color: var(--chip-alternate-bg-color);
  --chip-color: var(--chip-alternate-color);
}

.nest-chip[data-n-active] {
  --chip-bd-color: var(--chip-checked-bd-color);
  --chip-bg-color: var(--chip-checked-bg-color);
  --chip-color: var(--chip-checked-color);
}

.nest-chip[data-n-disabled] {
  cursor: not-allowed;
  border-color: var(--nest-chip-bd-color-disabled, var(--chip-bd-color));
  background-color: var(--nest-chip-bg-color-disabled, var(--chip-bg-color));
  color: var(--nest-chip-color-disabled, var(--chip-color));
  opacity: var(--nest-chip-opacity-disabled, 0.34);
}

@media (hover: hover) and (pointer: fine) {
  .nest-chip:hover {
    border-color: var(--nest-chip-bd-color-hover, var(--chip-bd-color));
    background-color: var(--nest-chip-bg-color-hover, var(--chip-bg-color));
    color: var(--nest-chip-color-hover, var(--chip-color));
  }

  .nest-chip[data-n-alternate]:hover {
    border-color: var(--nest-chip-alternate-bd-color-hover, var(--chip-bd-color));
    background-color: var(--nest-chip-alternate-bg-color-hover, var(--chip-bg-color));
    color: var(--nest-chip-alternate-color-hover, var(--chip-color));
  }

  .nest-chip[data-n-active]:hover {
    border-color: var(--nest-chip-checked-bd-color-hover, var(--chip-bd-color));
    background-color: var(--nest-chip-checked-bg-color-hover, var(--chip-bg-color));
    color: var(--nest-chip-checked-color-hover, var(--chip-color));
  }
}

.nest-chip:active {
  border-color: var(--nest-chip-bd-color-active, var(--chip-bd-color));
  background-color: var(--nest-chip-bg-color-active, var(--chip-bg-color));
  color: var(--nest-chip-color-active, var(--chip-color));
}

.nest-chip[data-n-alternate]:active {
  border-color: var(--nest-chip-alternate-bd-color-active, var(--chip-bd-color));
  background-color: var(--nest-chip-alternate-bg-color-active, var(--chip-bg-color));
  color: var(--nest-chip-alternate-color-active, var(--chip-color));
}

.nest-chip[data-n-active]:active {
  border-color: var(--nest-chip-checked-bd-color-active, var(--chip-bd-color));
  background-color: var(--nest-chip-checked-bg-color-active, var(--chip-bg-color));
  color: var(--nest-chip-checked-color-active, var(--chip-color));
}

.nest-chip-inner {
  display: flex;
  margin: -1px;
  align-items: center;
  height: var(--chip-h);
  padding-inline: var(--chip-px);
  gap: var(--chip-gap);
}

.nest-chip-icon {
  flex-shrink: 0;
  width: var(--chip-icon-size);
  height: var(--chip-icon-size);
}

.nest-chip-img {
  flex-shrink: 0;
  object-fit: cover;
  margin: var(--chip-img-m);
  width: var(--chip-img-size);
  height: var(--chip-img-size);
  border-radius: var(--chip-img-rad);
}

.nest-chip-action {
  flex-shrink: 0;
  transition: rotate 0.3s;
  width: var(--chip-action-size);
  height: var(--chip-action-size);
}

.nest-chip-action[data-n-active] {
  rotate: 180deg;
}