:host {
  display: inline-block;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: var(--font-family-body);
  font-size: var(--typography-size-body-sm);
  line-height: var(--line-height-body-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-letter-spacing-default);

  background-color: var(--color-surface-primary);
  border: var(--border-width-sm) solid transparent;
  border-radius: var(--border-radius-md);
  width: 24px;
  height: 24px;

  &[hoverable] {
    cursor: pointer;
  }

  //states
  &[selected] {
    background-color: var(--color-surface-action-solid);
    color: var(--color-text-action-on);

    &[active]:not([disabled]) {
      outline: var(--border-width-sm) solid var(--color-border-focus);
      outline-offset: 2px;
    }

    &[hoverable]:hover {
      background-color: var(--color-surface-action-solid-hover);
      color: var(--color-text-action-on);
    }

    &[disabled] {
      cursor: not-allowed;
      background-color: var(--color-surface-disabled-selected);
      color: var(--color-text-action-on);
    }

    &[disabled-style] {
      background-color: var(--color-surface-disabled-selected);
      color: var(--color-text-action-on);
    }
  }

  &[active]:not([disabled]) {
    border-color: var(--color-border-focus);
  }

  &[hoverable]:hover {
    background-color: var(--color-surface-action-solid-hover-light);
    color: var(--color-text-action);
  }

  &:focus-visible {
    outline: var(--border-width-sm) solid var(--color-border-focus);
    outline-offset: 2px;
  }

  &[disabled] {
    cursor: not-allowed;
    background-color: var(--color-surface-disabled);
    color: var(--color-text-disabled);
  }

  &[disabled-style] {
    background-color: var(--color-surface-disabled);
    color: var(--color-text-disabled);
  }
}