@use 'sass:map';
@use '../index' as *;

$banner: (
  background-color: var(--c-p-5),
  content-width: 42.5rem,
  content-background: map.get($color, 'white'),
  content-border-radius: map.get($border-radius, 'm'),
  content-padding: var(--s-l) var(--s-l),
  container-padding-bottom: (
    'mobile': var(--s-l),
    'tablet': var(--s-xl),
    'desktop': var(--s-3xl),
  ),
  container-padding-top: (
    'mobile': var(--s-l),
    'tablet': var(--s-xl),
    'desktop': var(--s-3xl),
  ),
  container-padding-horizontal: (
    'tablet': var(--s-xl),
  ),
  border-color: var(--c-s),
  border-radius: (
    'banner': 8px,
    'content': 4px,
  ),
  box-shadow: var(--sh-2),
  border-width: (
    'left': 4px,
    'bottom': 0,
  ),
  text-color: (
    'dark': var(--c-d-140),
    'light': map.get($color, 'white'),
    'inverted': map.get($color, 'white'),
  ),
  font: (
    'title': (
      'mobile': var(--f-2xl),
      'desktop-m': var(--f-4xl),
      'desktop-l': var(--f-5xl),
    ),
    'description': (
      'mobile': var(--f-xl),
      'desktop-m': var(--f-2xl),
      'desktop-l': var(--f-4xl),
    ),
  ),
  description-margin: var(--s-s),
  // DEPRECATED
  background: (
      'plain-background': linear-gradient(
          to right,
          var(--c-p-140) 0%,
          var(--c-p) 100%
        ),
      'text-box-mobile': map.get($color, 'white'),
      'text-box-desktop': rgba(255, 255, 255, 0.9),
      'image-overlay': linear-gradient(
          to right,
          var(--c-p-140) 0%,
          var(--c-p) 100%
        ),
      'text-highlight': linear-gradient(
          to right,
          var(--c-p-140) 0%,
          var(--c-p) 100%
        ),
    ),
);
$banner-print: (
  cta-radius: 4px,
);
