.action-chip {
  display: block;
  width: 36px;
  height: 36px;
  text-align: center;
  background: var(--pix-neutral-0);
  border: 1px solid var(--pix-neutral-20);
  border-radius: 50%;

  &__icon {
    top: 0%;
    bottom: 0%;
    left: calc(50% - 20px / 2);
    height: 100%;
    color: var(--pix-neutral-500);
    font-size: 18px;
  }

  &:hover {
    background: var(--pix-neutral-20);
    border: 1.4px solid var(--pix-neutral-500);
    cursor: pointer;
  }

  &:disabled {
    cursor: initial;
    pointer-events: none;
  }

  &--selected {
    border-color: var(--pix-primary-500);

    .action-chip__icon {
      color: var(--pix-primary-500);
    }

    &:hover {
      border-color: var(--pix-primary-700);

      .action-chip__icon {
        color: var(--pix-primary-700);
      }
    }

    &:focus-visible {
      background-color: var(--pix-primary-500);
      border-color: var(--pix-neutral-0);
      box-shadow: 0 0 0 3px var(--pix-primary-500);

      .action-chip__icon {
        color: var(--pix-neutral-0);
      }
    }
  }

  &:not(.action-chip--selected):focus-visible {
    background-color: var(--pix-neutral-500);
    border-color: var(--pix-neutral-0);
    outline: none;
    box-shadow: 0 0 0 3px var(--pix-neutral-500);

    .action-chip__icon {
      color: var(--pix-neutral-0);
    }
  }
}
