@use "../../../styles/tokens/space";
@use "../../../styles/tools/convert";

$layout: (
  z-index: 1000,
  display: block,
);

$border: 2px solid var(--color-border-contrast);
$icon-active-color: var(--color-icon-brand);

$dialog: (
  display: inline-block,
  max-width: convert.to-rem(300px),
  padding: space.get("medium"),
  background-color: var(--color-surface-primary),
  border: $border,
  border-radius: convert.to-rem(5px),
);

/*
 * Add space between trigger and tooltip.
*/
$offset: space.get("medium");

$arrow-color: var(--color-surface-primary);

/*
 * Arrow size MUST be a rem-based value. It's used in Pythagoras theorem
 * to find the hypotenuse size and sass math exponential functions do not handle units.
 * Therefore, the rem unit is added manually at the end of the calculation.
*/
$arrow-size: convert.to-rem(14px);

$direction-opposites: (
  "top": "bottom",
  "right": "left",
  "bottom": "top",
  "left": "right",
);

$direction-border-color-reset: (
  "top": (
    "top",
    "left",
  ),
  "bottom": (
    "bottom",
    "right",
  ),
  "left": (
    "bottom",
    "left",
  ),
  "right": (
    "top",
    "right",
  ),
);