@use "sass:map";

@use "../commons/variables";

$vars: (
  gap: (
    xxs: 4px,
    xs: 6px,
    sm: 8px,
    default: 14px,
    lg: 18px,
    xl: 24px,
    xxl: 32px,
    0: 0,
    auto: "auto",
  ),
  font-size: (
    lg: 18px,
    default: 16px,
    sm: 14px,
    h1: 48px,
    h2: 32px,
    h3: 24px,
    h4: 18px,
    h5: 16px,
    h6: 14px,
  ),
  background-color: var(--theme-gray-lightest),
  sidebar: (
    width: 240px,
  ),
  topbar: (
    height: 48px,
  ),
  animation-duration: 0.3s,
  elevation-size: 4px,

  border-radius: (
    xs: var(--gap-xxs),
    sm: var(--gap-xs),
    default: var(--gap-sm),
    lg: var(--gap-default),
    xl: var(--gap-lg),
    xxl: var(--gap-xl),
  ),
  sheet: (
    pv: var(--gap-xs),
    ph: var(--gap-sm),
    bg: var(--color-gray-200),
  ),
);