.c-icon-button {
  @apply flex cursor-pointer appearance-none items-center justify-center rounded border-none bg-transparent p-0 font-medium;

  &:disabled {
    @apply cursor-default shadow-none;
  }

  &:enabled {
    &:active {
      transform: scale(0.95);
    }

    &:focus,
    &:hover {
      @apply bg-elevate shadow;
    }

    &:hover {
      @apply outline outline-1 outline-purple-200-700;
    }

    &:focus-visible {
      @apply outline outline-1 outline-offset-1 outline-inherit;
    }
  }

  &-elevate {
    @apply bg-elevate shadow;
  }

  &-xxs {
    @apply h-5 w-5;
  }

  &-xs {
    @apply h-6 w-6;
  }

  &-sm {
    @apply h-9 w-9;
  }

  &-md {
    @apply h-11 w-11;
  }

  &-lg {
    @apply h-14 w-14;
  }
}
