@charset "UTF-8";
:root [data-theme-mode=light] {
  --c-base: #ffffff;
  --c-base-inverse: #000000;
  --c-primary: #0052ff;
  --c-accent: #e80262;
  --c-gray: color-mix(in srgb, var(--c-base-inverse) 80%, var(--c-base));
  --c-success: #008537;
  --c-alert: #bd5b00;
  --c-error: #e72326;
}

:root [data-theme-mode=dark] {
  --c-base: #000000;
  --c-base-inverse: #ffffff;
  --c-primary: #2469ff;
  --c-accent: #e80262;
  --c-gray: color-mix(in srgb, var(--c-base-inverse) 80%, var(--c-base));
  --c-success: #008a39;
  --c-alert: #bd5b00;
  --c-error: #e72326;
}

/* note on dim colour variations

- dim values on Figma are usually represented as percentages
- a well supported way of representing them in CSS is by adding the alpha value as an extension of the colour value
- hence, our alpha values as defined by UX correspond to the following hex values:

72% — B8
68% — AD
40% — 66
16% — 29
8% — 14

*/
.sui-AtomTooltip > .sui-AtomTooltip-inner .sui-AtomButton--primary.sui-AtomButton--flat.sui-AtomButton--negative {
  color: #bfc7d0;
}
.sui-AtomTooltip > .sui-AtomTooltip-inner .sui-AtomButton--primary.sui-AtomButton--flat.sui-AtomButton--negative:hover {
  background-color: inherit;
  color: #ffffff;
  text-decoration: underline;
}

.sui-PerfDynamicRendering-placeholder {
  width: 100%;
}