@layer components {
  .neumorphic-button {
    @apply inline-flex shrink-0 cursor-pointer flex-nowrap
      items-center justify-center gap-1.5 text-center
      align-middle no-underline select-none;
    padding-inline: var(--btn-p);
    height: var(--size);
    font-size: 0.875rem;
    font-weight: 600;
    transition-property: color, background-color, border-color, box-shadow;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-duration: 0.2s;
    border-start-start-radius: var(--join-ss, var(--radius-field));
    border-start-end-radius: var(--join-se, var(--radius-field));
    border-end-start-radius: var(--join-es, var(--radius-field));
    border-end-end-radius: var(--join-ee, var(--radius-field));

    --size: calc(var(--size-field, 0.25rem) * 10);
    --btn-bg: var(--btn-color, var(--neumorphic-color));
    --btn-fg: var(--neumorphic-text-color);
    --btn-p: 1rem;
    --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));
    --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),
      0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);
    --btn-noise: var(--fx-noise);
    --btn-color: var(--neumorphic-color);
    
    color: var(--btn-fg);
    background-color: var(--btn-bg);

    @apply neumorphic-shadow-16 neumorphic-text-4;
  
    @media (hover: hover) {
      &:hover {
        --btn-bg: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 7%);
        @apply neumorphic-shadow-12 neumorphic-text-inset-4;
      }
    }
  
    &.btn-active {
      --btn-bg: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 7%);
      --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
      isolation: isolate;
      @apply neumorphic-shadow-inset-12;
    }
  
    &:focus-visible {
      outline-width: 2px;
      outline-style: solid;
    }
  
    &:active:not(.btn-active) {
      @apply neumorphic-shadow-inset-12;
      translate: 0 0.5px;
      --btn-bg: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 5%);
      --btn-border: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 7%);
      --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
    }
  
    &:is(:disabled, [disabled], .btn-disabled) {
      &:not(.btn-link, .btn-ghost) {
        @apply bg-base-content/10;
        box-shadow: none;
      }
  
      @apply pointer-events-none;
      --btn-border: #0000;
      --btn-noise: none;
      --btn-fg: color-mix(in oklch, var(--neumorphic-text-color) 20%, #0000);
  
      @media (hover: hover) {
        &:hover {
          @apply bg-neutral/20 pointer-events-none;
          --btn-border: #0000;
          --btn-fg: color-mix(in oklch, var(--neumorphic-text-color) 20%, #0000);
        }
      }
    }
  
    &:is(input[type="checkbox"], input[type="radio"]) {
      @apply appearance-none;
  
      /* &:not(.btn-square, .btn-circle) {
        @apply w-auto;
      } */
  
      &::after {
        content: attr(aria-label);
      }
  
      &:checked {
        outline-width: 2px;
        outline-style: solid;
        --btn-bg: color-mix(in oklab, var(--btn-color, var(--neumorphic-color)), #000 7%);
        --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);
        isolation: isolate;
      }
    }
  }
  
  .btn-primary {
    --btn-color: var(--color-primary);
    --btn-fg: var(--color-primary-content);
  }
  
  .btn-secondary {
    --btn-color: var(--color-secondary);
    --btn-fg: var(--color-secondary-content);
  }
  
  .btn-accent {
    --btn-color: var(--color-accent);
    --btn-fg: var(--color-accent-content);
  }
  
  .btn-neutral {
    --btn-color: var(--color-neutral);
    --btn-fg: var(--color-neutral-content);
  }
  
  .btn-info {
    --btn-color: var(--color-info);
    --btn-fg: var(--color-info-content);
  }
  
  .btn-success {
    --btn-color: var(--color-success);
    --btn-fg: var(--color-success-content);
  }
  
  .btn-warning {
    --btn-color: var(--color-warning);
    --btn-fg: var(--color-warning-content);
  }
  
  .btn-error {
    --btn-color: var(--color-error);
    --btn-fg: var(--color-error-content);
  }
  
  .btn-ghost {
    &:not(.btn-active, :hover, :active:focus, :focus-visible) {
      --btn-shadow: "";
      --btn-bg: #0000;
      --btn-border: #0000;
      --btn-noise: none;
      &:not(:disabled, [disabled], .btn-disabled) {
        @apply outline-current;
        --btn-fg: currentColor;
      }
    }
  }
  .neumorphic-btn-ghost {
    &:not(.btn-active, :active:focus, :focus-visible) {
      --btn-shadow: "";
      --btn-bg: #0000;
      --btn-border: #0000;
      --btn-noise: none;
      box-shadow: none;
      &:not(:disabled, [disabled], .btn-disabled) {
        @apply outline-current;
        --btn-fg: currentColor;
      }
    }
  }
  
  .btn-link {
    @apply underline outline-current;
    --btn-border: #0000;
    --btn-bg: #0000;
    --btn-fg: var(--color-primary);
    --btn-noise: none;
    --btn-shadow: "";
  
    &:is(.btn-active, :hover, :active:focus, :focus-visible) {
      @apply underline;
      --btn-border: #0000;
      --btn-bg: #0000;
    }
  }
  
  .btn-outline {
    &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled, :checked, [checked]) {
      --btn-shadow: "";
      --btn-bg: #0000;
      --btn-fg: var(--btn-color);
      --btn-border: var(--btn-color);
      --btn-noise: none;
    }
  }
  
  .btn-dash {
    &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) {
      --btn-shadow: "";
      border-style: dashed;
      --btn-bg: #0000;
      --btn-fg: var(--btn-color);
      --btn-border: var(--btn-color);
      --btn-noise: none;
    }
  }
  
  .btn-soft {
    &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled) {
      --btn-shadow: "";
      --btn-fg: var(--btn-color, var(--neumorphic-text-color));
      --btn-bg: color-mix(
        in oklab,
        var(--btn-color, var(--neumorphic-text-color)) 8%,
        var(--color-base-100)
      );
      --btn-border: color-mix(
        in oklab,
        var(--btn-color, var(--neumorphic-text-color)) 10%,
        var(--color-base-100)
      );
      --btn-noise: none;
    }
  }
  
  .btn-xs {
    font-size: 0.6875rem;
    --btn-p: 0.5rem;
    --size: calc(var(--size-field, 0.25rem) * 6);
  }
  
  .btn-sm {
    font-size: 0.75rem;
    --btn-p: 0.75rem;
    --size: calc(var(--size-field, 0.25rem) * 8);
  }
  
  .btn-md {
    font-size: 0.875rem;
    --btn-p: 1rem;
    --size: calc(var(--size-field, 0.25rem) * 10);
  }
  
  .btn-lg {
    font-size: 1.125rem;
    --btn-p: 1.25rem;
    --size: calc(var(--size-field, 0.25rem) * 12);
  }
  
  .btn-xl {
    font-size: 1.375rem;
    --btn-p: 1.5rem;
    --size: calc(var(--size-field, 0.25rem) * 14);
  }
  
  .btn-square {
    @apply px-0;
    width: var(--size);
    height: var(--size);
  }
  
  .btn-circle {
    @apply rounded-full px-0;
    width: var(--size);
    height: var(--size);
  }
  
  .btn-wide {
    @apply w-full max-w-64;
  }
  
  .btn-block {
    @apply w-full;
  }
}