:host {
  display: inline-block;
}

div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-body);
  color: var(--color-text-disabled);
  background-color: var(--color-surface-disabled);
  width: fit-content;

  //sizes (default is md)
  &.sm {
    padding: var(--scale-100) var(--scale-300);
  }

  &.md {
    padding: var(--scale-200) var(--scale-400);
  }

  &.lg {
    padding: var(--scale-250) var(--scale-600);
  }

  > :first-child:not(:empty) {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-icon-primary);

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

  &[disabled] {
    cursor: not-allowed;

    label {
      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;
    }
  }
}