:root {
  --datax-safe-top: env(safe-area-inset-top, 0px);
  --datax-safe-right: env(safe-area-inset-right, 0px);
  --datax-safe-bottom: env(safe-area-inset-bottom, 0px);
  --datax-safe-left: env(safe-area-inset-left, 0px);
}

body {
  box-sizing: border-box;
  padding: var(--datax-safe-top) var(--datax-safe-right) var(--datax-safe-bottom) var(--datax-safe-left);
}

.jp-LabShell.jp-ThemedContainer {
  inset: var(--datax-safe-top) var(--datax-safe-right) var(--datax-safe-bottom) var(--datax-safe-left);
}

#datax-pwa-control {
  position: fixed;
  top: calc(var(--datax-safe-top) + 8px);
  right: calc(var(--datax-safe-right) + 8px);
  z-index: 10000;
  transform: translate3d(0, 0, 0);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: min(480px, calc(100vw - var(--datax-safe-left) - var(--datax-safe-right) - 16px));
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--jp-border-color1, #999);
  border-radius: 4px;
  color: var(--jp-ui-font-color1, #222);
  background: var(--jp-layout-color1, #fff);
  font: 13px/1.5 var(--jp-ui-font-family, sans-serif);
}

#datax-pwa-control[hidden],
#datax-pwa-control button[hidden] {
  display: none;
}

#datax-pwa-control button,
#datax-offline-control button {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

#datax-pwa-control button {
  padding: 8px;
  cursor: pointer;
  color: inherit;
  background: var(--jp-layout-color2, #eee);
  border: 1px solid var(--jp-border-color1, #999);
  border-radius: 4px;
  font: inherit;
}

#datax-pwa-control button:focus-visible,
#datax-offline-control button:focus-visible {
  outline: 2px solid var(--jp-brand-color1, #1565c0);
  outline-offset: 2px;
}

#datax-pwa-control button:hover {
  background: var(--jp-layout-color3, #ddd);
}

@media (min-width: 601px) {
  #datax-offline-control button {
    min-height: 24px;
  }
}

@media (max-width: 600px) {
  .jp-ToolbarButtonComponent,
  .lm-Menu-item {
    min-height: 44px;
    touch-action: manipulation;
  }

  .jp-Toolbar {
    min-height: 48px;
  }

  .lm-Menu-item {
    height: 44px;
  }

  .lm-Menu {
    max-width: calc(100vw - var(--datax-safe-left) - var(--datax-safe-right) - 16px);
    max-height: calc(100dvh - var(--datax-safe-top) - var(--datax-safe-bottom) - 16px);
    overflow: auto;
  }

  /* The plugin playground log badge would otherwise cover the floating offline control. */
  #jp-plugin-playground-log-badge {
    bottom: calc(var(--datax-safe-bottom) + 88px) !important;
    right: calc(var(--datax-safe-right) + 12px) !important;
  }
}