/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */

:root {
  /* header height is 28px + 1px for its border */
  --editor-header-height: 29px;
  /* footer height is 24px + 1px for its border */
  --editor-footer-height: 25px;
  /* searchbar height is 24px + 1px for its top border */
  --editor-searchbar-height: 25px;
  /* Remove once https://bugzilla.mozilla.org/show_bug.cgi?id=1520440 lands */
  --theme-code-line-height: calc(15 / 11);
  /* Background and text colors and opacity for skipped breakpoint panes */
  --skip-pausing-background-color: var(--theme-toolbar-hover);
  --skip-pausing-opacity: 0.6;
  --skip-pausing-color: var(--theme-body-color);
  --theme-inline-preview-label-pause-color: var(--paused-color);
  --theme-inline-preview-label-pause-background: var(--paused-background-color);

  --search-overlays-semitransparent: light-dark(rgba(221, 225, 228, 0.66), rgba(42, 46, 56, 0.66));
  --popup-shadow-color: light-dark(#d0d0d0, #5c667b);
  --theme-inline-preview-background: light-dark(rgb(251, 247, 255), rgb(43, 38, 50));
  --theme-inline-preview-border-color: light-dark(#ebd1ff, #47326c);
  --theme-inline-preview-label-trace-color: light-dark(#6300a6, #dfccff);
  --theme-inline-preview-label-trace-background: light-dark(
    hsl(from rgb(244, 230, 255) h s calc(l * 0.7) / 30%) /* use 30% opacity to allow showing text selection background */,
    hsl(from #3f2e5f h s calc(l * 2) / 30%) /* dark theme requires some specific luminosity factor */
  );
  --paused-background-color: light-dark(hsl(54, 100%, 92%), hsl(42, 37%, 19%));
  --paused-color: light-dark(var(--theme-body-color), hsl(43, 94%, 81%));
  --paused-error-color: light-dark(var(--red-70), var(--red-20));
}

/* Animations */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}