.gui-button-icon {
  @apply p-0 items-center justify-center bg-transparent border-transparent;

  &:hover,
  &:focus {
    @apply bg-neutral-primary/10 text-neutral-20 no-underline;

    &:not(.gui-button-icon-no-fill) .gui-icon {
      path {
        @apply fill-neutral-20;
      }
    }
  }

  &:disabled {
    @apply opacity-30 border-transparent bg-transparent;
  }
}

.gui-button-icon:active,
.gui-button-icon.gui-button-icon-active {
  @apply bg-blue-90 border-blue-90 shadow-none;

  &:hover,
  &:focus {
    @apply bg-blue-95;
  }

  &:not(.gui-button-icon-no-fill) path {
    fill: theme('colors.blue.primary');
  }
}

.gui-button-icon-enabled {
  &:hover,
  &:focus {
    @apply bg-green-95;
  }

  &:focus {
    @apply border-green-primary shadow-button-icon-enabled-focus;
  }

  &:not(.gui-button-icon-no-fill) path {
    fill: theme('colors.green.primary');
  }
}