import { css } from '@design.estate/dees-element';

/**
 * Global component styles for mobile-optimized components
 * Include this in all component static styles arrays
 */
export const mobileComponentStyles = css`
  /* Box sizing reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Prevent text selection on interactive elements */
  button,
  a,
  [role="button"],
  [role="tab"],
  [draggable="true"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* Remove default button styles */
  button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

  /* Smooth scrolling for containers */
  .scrollable {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }

  /* Remove tap highlight on mobile */
  a,
  button,
  [role="button"],
  [role="tab"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* Focus styles */
  :focus {
    outline: none;
  }

  :focus-visible {
    outline: 2px solid var(--dees-ring, #3b82f6);
    outline-offset: 2px;
  }

  /* Prevent layout shift from scrollbars */
  .scroll-stable {
    scrollbar-gutter: stable;
  }

  /* Common transition for interactive elements */
  .interactive {
    transition: all var(--dees-transition-fast, 150ms ease);
  }

  /* Touch-friendly minimum sizes */
  .touch-target {
    min-width: 44px;
    min-height: 44px;
  }

  /* Prevent iOS zoom on inputs (16px minimum) */
  input,
  textarea,
  select {
    font-size: 16px;
  }
`;