@layer components {
  .sheet > .quick-record-header,
  .sheet > .sheet-title-row {
    touch-action: none;
  }

  [data-specimen-tab-content] {
    touch-action: pan-y pinch-zoom;
  }

  .sheet :is(.quick-record-form-body, .animal-card-editor-scroll) {
    overscroll-behavior-y: contain;
  }

  .is-mobile-drawer-tracking {
    --mobile-drawer-backdrop-visibility: visible;
    --mobile-drawer-backdrop-pointer-events: none;
    --mobile-drawer-backdrop-transition: none;
    --mobile-drawer-panel-transition: none;
  }

  @media (max-width: 959px),
    (min-width: 960px) and (max-width: 1199px) and (hover: none),
    (min-width: 960px) and (max-width: 1199px) and (pointer: coarse) {
    html:has([data-app-frame] [data-mobile-navigation-drawer]),
    body:has([data-app-frame] [data-mobile-navigation-drawer]) {
      overscroll-behavior-x: none;
      background-color: var(--bg-app);
    }

    .setae-gui-host:has([data-app-frame] [data-mobile-navigation-drawer]) {
      isolation: isolate;
      overscroll-behavior-x: none;
      background-color: var(--bg-app);
    }

    [data-app-frame]:has(.mobile-navigation-drawer) {
      isolation: isolate;
      overscroll-behavior-x: none;
      background-color: var(--bg-app);
      touch-action: pan-y pinch-zoom;
    }

    .app-frame .mobile-navigation-edge {
      position: fixed;
      z-index: 39;
      top: 0;
      bottom: 0;
      left: 0;
      width: calc(var(--safe-left) + 24px);
      display: block;
      background: transparent;
      touch-action: pan-y pinch-zoom;
      -webkit-touch-callout: none;
      user-select: none;
    }

    .app-frame:has(.mobile-navigation-drawer.is-open) .mobile-navigation-edge,
    .is-mobile-drawer-tracking .app-frame .mobile-navigation-edge,
    .is-mobile-drawer-settling .app-frame .mobile-navigation-edge {
      pointer-events: none;
    }

    .app-frame :is(.mobile-app-bar, .app-workspace, .mobile-navigation-drawer-backdrop, .mobile-drawer-scroll, .mobile-drawer-header, .mobile-drawer-footer) {
      touch-action: pan-y pinch-zoom;
    }

    .app-frame :is(.mobile-app-bar, .app-workspace) {
      backface-visibility: hidden;
      transition: transform var(--motion-exit) var(--ease-standard);
    }

    .is-mobile-drawer-primed .app-frame :is(.mobile-app-bar, .app-workspace) {
      will-change: transform;
    }

    .is-mobile-drawer-primed .app-frame:where(:not(:has(.mobile-navigation-drawer.is-open))) :is(.mobile-app-bar, .app-workspace) {
      transform: translate3d(0, 0, 0);
    }

    .app-frame :is(.mobile-navigation-drawer, .mobile-navigation-drawer-backdrop) {
      backface-visibility: hidden;
    }

    .app-frame .mobile-navigation-drawer-backdrop {
      transform: translate3d(0, 0, 0);
    }

    .app-frame:has(:where(.mobile-navigation-drawer.is-open)) :is(.mobile-app-bar, .app-workspace) {
      transform: translate3d(var(--mobile-drawer-width), 0, 0);
      transition-duration: var(--motion-enter);
      transition-timing-function: var(--ease-emphasized);
    }

    .is-mobile-drawer-tracking .app-frame :is(.mobile-app-bar, .app-workspace) {
      transform: translate3d(var(--mobile-drawer-content-x, 0px), 0, 0);
      transition: none;
      will-change: transform;
    }

    .is-mobile-drawer-settling .app-frame :is(.mobile-app-bar, .app-workspace) {
      will-change: transform;
    }

    .app-frame:has(.mobile-navigation-drawer.is-open) .app-transient-stack,
    .is-mobile-drawer-tracking .app-frame .app-transient-stack,
    .is-mobile-drawer-settling .app-frame .app-transient-stack {
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }
  }

  .is-mobile-drawer-tracking .mobile-navigation-drawer-backdrop {
    will-change: opacity;
  }

  .is-mobile-drawer-tracking .mobile-navigation-drawer {
    will-change: transform;
  }

  .is-mobile-drawer-settling .mobile-navigation-drawer,
  .is-mobile-drawer-settling .mobile-navigation-drawer-backdrop {
    will-change: transform, opacity;
  }

  .sheet.is-sheet-gesture-tracking {
    will-change: transform;
    transform: translate3d(0, var(--sheet-drag-y, 0), 0);
  }

  .sheet-backdrop.is-sheet-gesture-tracking {
    background: color-mix(
      in srgb,
      var(--overlay-backdrop) var(--sheet-backdrop-strength, 100%),
      transparent
    );
  }

  .sheet.is-sheet-gesture-settling {
    transition: transform var(--motion-fast) var(--ease-standard);
    transform: translate3d(0, 0, 0);
  }

  [data-specimen-tab-content].is-tab-swipe-tracking {
    will-change: transform;
    transform: translate3d(var(--specimen-swipe-x, 0), 0, 0);
  }

  [data-specimen-tab-content].is-tab-swipe-settling {
    transition: transform var(--motion-fast) var(--ease-standard);
    transform: translate3d(0, 0, 0);
  }

  @media (hover: none) and (pointer: coarse) {
    :is(.button, .icon-button, .action-row, .content-action, .selection-row):active {
      background: var(--bg-hover);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .app-frame :is(.mobile-app-bar, .app-workspace, .mobile-navigation),
    .is-mobile-drawer-settling .mobile-navigation-drawer,
    .is-mobile-drawer-settling .mobile-navigation-drawer-backdrop,
    .sheet.is-sheet-gesture-settling,
    [data-specimen-tab-content].is-tab-swipe-settling {
      transition: none;
    }
  }
}