@utility btn-close {
  @layer base {
    --btn-close-color: var(--text-color-default);
    --btn-close-hover-bg: var(--background-color-muted);
    --btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%231D2025' viewBox='0 0 16 16'%3e%3cpath d='M.293 1.707a1 1 0 0 1 1.414-1.414L8 6.586l6.293-6.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293A1 1 0 0 1 .293 14.293L6.586 8 .293 1.707z'/%3e%3c/svg%3e");
    --btn-width: 0.75rem;
    --btn-height: 0.75rem;
    --btn-close-opacity: 0.5;
    --btn-close-hover-opacity: 0.75;
    --btn-close-focus-opacity: 1;
    --btn-close-disabled-opacity: 0.25;
    --btn-close-padding: --spacing(1.5);
    --btn-close-border-radius: var(--radius-sm);

    @apply box-content 
    w-[var(--btn-width)]
    h-[var(--btn-height)]
    p-[var(--btn-close-padding)]
    bg-[image:var(--btn-close-bg)] bg-center bg-no-repeat bg-[length:--spacing(3)_auto]
    text-[var(--btn-close-color)]
    opacity-[var(--btn-close-opacity)]
    transition duration-200 ease-in-out
    shrink-0
    border-0 
    select-none
    cursor-pointer
    rounded-[var(--btn-close-border-radius)];

    @variant dark {
      --btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFF' viewBox='0 0 16 16'%3e%3cpath d='M.293 1.707a1 1 0 0 1 1.414-1.414L8 6.586l6.293-6.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293A1 1 0 0 1 .293 14.293L6.586 8 .293 1.707z'/%3e%3c/svg%3e");
    }

    &:hover {
      @apply bg-[var(--btn-close-hover-bg)] opacity-[var(--btn-close-hover-opacity)];
    }

    &:focus {
      @apply outline-0 opacity-[var(--btn-close-focus-opacity)];
    }

    &:focus-visible {
      @apply ring-4 ring-primary-lighter;
    }

    &:disabled,
    &.disabled {
      @apply pointer-events-none opacity-[var(--btn-close-disabled-opacity)];
    }
  }
}

@utility btn-close-white {
  @layer base {
    --btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFF' viewBox='0 0 16 16'%3e%3cpath d='M.293 1.707a1 1 0 0 1 1.414-1.414L8 6.586l6.293-6.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293A1 1 0 0 1 .293 14.293L6.586 8 .293 1.707z'/%3e%3c/svg%3e");
  }
}

@utility btn-close-circle {
  @layer base {
    --btn-close-border-radius: calc(infinity * 1px);
  }
}