@use "sass:map";

@use "../commons/variables";

$vars: (
  gap: (
    xxs: 6px,
    xs: 8px,
    sm: 12px,
    default: 16px,
    lg: 24px,
    xl: 32px,
    xxl: 40px,
    0: 0,
    auto: "auto",
  ),
  font-size: (
    lg: 30px,
    default: 24px,
    sm: 20px,
    h1: 60px,
    h2: 48px,
    h3: 36px,
    h4: 30px,
    h5: 24px,
    h6: 20px,
  ),
  sidebar: (
    width: 480px,
  ),
  topbar: (
    height: 62px,
  ),
  animation-duration: 0.3s,
  elevation-size: 8px,

  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-100),
  ),
);