:host {
  display: inline-block;
}

div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--scale-200);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-letter-spacing-default);
  width: fit-content;
  color: var(--color-text-disabled);
  background-color: var(--color-surface-disabled);
  user-select: none;

  //sizes (default is md)
  &.sm {
    padding: var(--scale-100) var(--scale-300);
    font-size: var(--typography-size-body-sm);
    line-height: var(--line-height-body-sm);
    label {
      height: calc(var(--line-height-body-sm) + 2px);
    }
  }

  &.md {
    padding: var(--scale-200) var(--scale-400);
    font-size: var(--typography-size-body-md);
    line-height: var(--line-height-body-md);
    label {
      height: calc(var(--line-height-body-md));
    }
  }

  &.lg {
    padding: var(--scale-250) var(--scale-600);
    font-size: var(--typography-size-body-lg);
    line-height: var(--line-height-body-lg);

    label {
      height: calc(var(--line-height-body-lg));
    }
  }

  .icon > *:first-child:not(:empty) {
    display: flex;
    justify-content: center;
    align-items: center;

    // need to target the svg for it to apply
    svg {
      width: var(--scale-600);
      height: var(--scale-600);
      color: var(--color-icon-primary);
    }
  }

  label:empty,
  label:has(slot:not(:has-slotted)),
  span.icon:has(> slot:not(:has-slotted)),
  slot:not(:has-slotted) {
    display: none;
  }

  &[disabled],
  &[disabled] * {
    cursor: not-allowed;
  }

  &.active {
    background-color: var(--color-surface-action-solid);
    color: var(--color-text-action-on);

    // need to target the svg for it to apply
    svg {
      color: var(--color-icon-action-on) !important;
    }
  }
}