/**
 * Button
 */

/* TODO(thure): Focus is handled by .dx-focus-ring, but should ideally be applied as part of this component. */
@layer dx-components {
  /**
   * NOTE: These are component classes (not utility classes) on a different layer, which themselves apply utility classes using `@apply`.
   */

  /* Base styles */
  .dx-button {
    @apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[2rem] px-3;
    @apply font-medium transition-colors duration-100 ease-linear bg-input-bg;
    /* The default variant inherits ambient valence colors when rendered inside a valence surface
     * (e.g. Message.Root, which sets --dx-valence-*); otherwise it falls back to the base input styling. */
    &[data-variant='default'] {
      color: var(--dx-valence-text, inherit);
      background: var(--dx-valence-bg, var(--color-input-bg));
    }
    &[aria-pressed='true'],
    &[aria-checked='true'] {
      @apply text-accent-text bg-attention-surface;
    }

    /* Disabled styles */
    &[disabled]:not([disabled='false']) {
      @apply opacity-40 cursor-not-allowed shadow-none;
    }

    /* Variants consistent between enabled & disabled */
    &[data-variant='ghost'] {
      @apply bg-transparent;
      &:hover {
        /* Tint relative to the host surface (--surface-bg, set by the enclosing dx-*-surface zone)
         * so the hover reads correctly on any background: darker in light mode, lighter in dark.
         * Falls back to base-surface when no surface zone is in scope. */
        background: light-dark(
          oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.05) c h),
          oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.05) c h)
        );
        @apply text-inherit;
      }
      &[data-state='open'] {
        @apply bg-input-bg;
      }
      &[aria-pressed='true'],
      &[aria-checked='true'] {
        @apply bg-base-surface text-accent-text;
      }
    }
    &[data-variant='outline'] {
      @apply border border-base-surface bg-transparent;
      &:hover {
        @apply bg-hover-surface;
      }
    }

    /* Enabled styles */
    &:not([disabled]),
    &[disabled='false'] {
      &:hover {
        @apply bg-hover-surface;
      }

      &[data-variant='default']:hover {
        color: var(--dx-valence-text);
        background-color: var(--dx-valence-bg-hover, var(--color-hover-surface));
      }

      /* 
       * Inside a valence surface the (otherwise transparent) ghost hover adopts the valence background;
       * elsewhere it falls back to the standard hover surface. 
       */
      &[data-variant='ghost']:hover {
        color: var(--dx-valence-text);
        background-color: var(--dx-valence-bg, var(--color-hover-surface));
      }

      &[data-variant='primary'] {
        @apply text-accent-fg bg-accent-bg;
        &:hover,
        &[aria-pressed='true'],
        &[aria-checked='true'],
        &[data-state='open'] {
          @apply bg-accent-bg-hover;
        }
      }
      &[data-variant='destructive'] {
        @apply text-accent-fg bg-error-bg;
        &:hover,
        &[aria-pressed='true'],
        &[aria-checked='true'],
        &[data-state='open'] {
          @apply bg-error-bg-hover;
        }
      }
      &[data-variant='valence'] {
        @apply text-inverse-fg;
        background: var(--dx-valence-bg, var(--color-neutral-bg));
        &:hover,
        &[aria-pressed='true'],
        &[aria-checked='true'],
        &[data-state='open'] {
          background-color: var(--dx-valence-bg-hover, var(--color-neutral-bg-hover));
        }
      }
    }
  }

  /* Props */
  .dx-button:not([data-props~='grouped']) {
    @apply rounded-xs;
  }
  .dx-button:not([data-props~='wrap']) {
    @apply truncate;
  }
  .dx-button[data-density='lg'] {
    @apply min-h-[2.5rem] px-3;
  }
  .dx-button[data-density='sm'] {
    @apply min-h-[1.75rem] px-2;
  }
  .dx-button[data-density='xs'] {
    @apply min-h-[1.5rem] px-1 text-xs;
  }
  .dx-button[data-density='xs'].aspect-square {
    @apply size-6 px-0;
  }
  @media (pointer: fine) {
    .dx-button[data-density='md'] {
      @apply min-h-[2rem] px-2.5;
    }
  }
}