.icon-btn {
  @apply inline-flex flex-shrink-0 cursor-pointer select-none flex-wrap items-center justify-center rounded;

  /* default */
  svg {
    width: 20px;
    height: 20px;
  }

  @apply p-2.5;

  &-rounded {
    @apply rounded-full;
  }

  &-lg {
    svg {
      width: 24px;
      height: 24px;
    }

    @apply p-3;
  }

  &-md {
    svg {
      width: 20px;
      height: 20px;
    }

    @apply p-2.5;
  }

  &-sm {
    svg {
      width: 16px;
      height: 16px;
    }

    @apply p-2;
  }

  &-xs {
    svg {
      width: 12px;
      height: 12px;
    }

    @apply p-[7px];
  }

  &-primary {
    @apply bg-fill-primary text-inverse;

    &:hover {
      @apply bg-fill-primary;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-secondary {
    @apply bg-fill-inverse text-primary border-fill-tertiary relative overflow-hidden border;

    &:hover::after {
      content: '';
      @apply bg-fill-tertiary absolute inset-0;
    }

    &:disabled {
      @apply text-tertiary pointer-events-none;
    }
  }

  &-tertiary {
    @apply text-primary;

    &:hover {
      @apply bg-fill-tertiary;
    }

    &:disabled {
      @apply text-tertiary pointer-events-none;
    }
  }

  &-red {
    @apply bg-red-primary text-white;

    &:hover {
      background-color: color-mix(
        in srgb,
        var(--fill-color-primary),
        transparent 20%
      );
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-orange {
    @apply bg-orange-primary text-white;

    &:hover {
      @apply bg-orange-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-yellow {
    @apply bg-yellow-primary text-white;

    &:hover {
      @apply bg-yellow-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-green {
    @apply bg-green-primary text-white;

    &:hover {
      @apply bg-green-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-blue {
    @apply bg-blue-primary text-white;

    &:hover {
      @apply bg-blue-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-navy {
    @apply bg-navy-primary text-white;

    &:hover {
      @apply bg-navy-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }

  &-purple {
    @apply bg-purple-primary text-white;

    &:hover {
      @apply bg-purple-primary/80;
    }

    &:disabled {
      @apply bg-fill-tertiary text-tertiary pointer-events-none;
    }
  }
}
