/*
 * Primitif bersama untuk komponen M3:
 *  - State layer (hover 8 %, focus 10 %, pressed 10 %, dragged 16 %):
 *    https://m3.material.io/foundations/interaction/states/state-layers
 *  - Target sentuh minimum 48 dp (aksesibilitas M3 / WCAG 2.5.8).
 *  - Layout: margin & breakpoint M3 (https://m3.material.io/foundations/layout/applying-layout/window-size-classes)
 * Variabel situs (bukan token M3) memakai prefix --sd-*.
 */
@layer tokens, base, components, utilities;
@layer components {
  /*
   * Elemen dengan .md-state-layer harus menetapkan `color` = warna konten (on-color);
   * lapisan memakai currentColor dengan opasitas token.
   */
  .md-state-layer {
    position: relative;
    isolation: isolate;
  }
  .md-state-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--md-sys-motion-spring-standard-fast-effects-duration)
      var(--md-sys-motion-spring-standard-fast-effects);
  }
  @media (hover: hover) {
    .md-state-layer:not(:disabled, [aria-disabled="true"]):hover::before {
      opacity: var(--md-sys-state-hover-state-layer-opacity);
    }
  }
  .md-state-layer:not(:disabled, [aria-disabled="true"]):focus-visible::before {
    opacity: var(--md-sys-state-focus-state-layer-opacity);
  }
  .md-state-layer:not(:disabled, [aria-disabled="true"]):active::before {
    opacity: var(--md-sys-state-pressed-state-layer-opacity);
  }
  .md-state-layer[data-dragged="true"]::before {
    opacity: var(--md-sys-state-dragged-state-layer-opacity);
  }

  /* Perluas area sentuh menjadi ≥ 48 dp tanpa mengubah ukuran visual. */
  .md-touch-target {
    position: relative;
  }
  .md-touch-target::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: max(100%, 48px);
    block-size: max(100%, 48px);
    translate: -50% -50%;
  }

  /* Konten nonaktif: opasitas 38 % (spec states — disabled content). */
  .md-disabled,
  :disabled {
    cursor: not-allowed;
  }
}

@layer base {
  :root {
    /* Breakpoint M3 (dp = px CSS): compact <600, medium 600–839, expanded 840–1199, large 1200–1599, xl ≥1600 */
    --sd-layout-margin: 16px; /* compact */
    --sd-layout-spacer: 16px;
    --sd-layout-nav-inline: 0px; /* lebar komponen navigasi di sisi kiri (rail/drawer) */
    --sd-layout-nav-bottom: 64px; /* navigation bar (compact) */
    --sd-top-app-bar-height: 64px;
    --sd-content-max: 1600px;
  }
  @media (width >= 600px) {
    :root {
      --sd-layout-margin: 24px;
      --sd-layout-spacer: 24px;
      --sd-layout-nav-inline: 96px; /* collapsed navigation rail */
      --sd-layout-nav-bottom: 0px;
    }
  }
  @media (width >= 1200px) {
    :root {
      --sd-layout-nav-inline: 360px; /* standard navigation drawer / expanded rail */
    }
  }
}