///
//  Copyright (c) 2022 GrowStocks
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
//  copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
//  The above copyright notice and this permission notice shall be included in all
//  copies or substantial portions of the Software.
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
//  SOFTWARE.
///

$expressive-inks: false !default;
$module-mode: false !default;
$test-mode: $module-mode !default;
$vue-mode: $test-mode !default;

@use 'kardia' with (
  $expressive-inks: $expressive-inks,
  $module-mode: $module-mode,
  $test-mode: $test-mode,
  $vue-mode: $vue-mode,
);
@use 'sass:map';
@use 'init-font-pack' as font-pack;

// For accessing core lib from the main gaia module.
@forward 'kardia';

@mixin init(
  $surface: 'gs-blue',
  $accent: 'gs-yellow',
  $background: 'gs-blue.800',
  $error: 'gs-red',
  $warning: 'gs-yellow',
  $success: 'gs-green',
  $undefined: 'gs-grey',
  $radius: (),
  $global: (),
  $supertitle: (),
  $title: (),
  $subtitle: (),
  $body: (),
  $mono: (),
  $small: (),
  $breakpoints: (),
) {

  $_init-family: 'family.sans-serif';
  $_init-line-height: 'line-height.normal';

  $_init-type-global: (
    'family': $_init-family,
    'size': 'size.sm',
    'weight': 'weight.normal',
    'line-height': $_init-line-height,
  );

  $_init-type-supertitle: (
    'family': $_init-family,
    'size': 'size.xl',
    'weight': 'weight.black',
    'line-height': $_init-line-height,
  );

  $_init-type-title: (
    'family': $_init-family,
    'size': 'size.lg',
    'weight': 'weight.bold',
    'line-height': $_init-line-height,
  );

  $_init-type-subtitle: (
    'family': $_init-family,
    'size': 'size.md',
    'weight': 'weight.bold',
    'line-height': $_init-line-height,
  );

  $_init-type-body: (
    'family': $_init-family,
    'size': 'size.sm',
    'weight': 'weight.normal',
    'line-height': $_init-line-height,
  );

  $_init-type-mono: (
    'family': 'family.mono',
    'size': 'size.sm',
    'weight': 'weight.normal',
    'line-height': $_init-line-height,
  );

  $_init-type-small: (
    'family': $_init-family,
    'size': 'size.xs',
    'weight': 'weight.light',
    'line-height': $_init-line-height,
  );

  $_init-breakpoints: (
    'small': kardia.primitive-token-get('breakpoint.sm'),
    'medium': kardia.primitive-token-get('breakpoint.md'),
    'large': kardia.primitive-token-get('breakpoint.lg'),
    'xlarge': kardia.primitive-token-get('breakpoint.xl'),
  );

  :root {
    @include kardia.theme-config(
      $surface: $surface,
      $accent: $accent,
      $background: $background,
      $error: $error,
      $warning: $warning,
      $success: $success,
      $undefined: $undefined,
      $radius: $radius,
      $breakpoints: $breakpoints,
      $global: map.merge($_init-type-global, $global),
      $supertitle: map.merge($_init-type-supertitle, $supertitle),
      $title: map.merge($_init-type-title, $title),
      $subtitle: map.merge($_init-type-subtitle, $subtitle),
      $body: map.merge($_init-type-body, $body),
      $mono: map.merge($_init-type-mono, $mono),
      $small: map.merge($_init-type-small, $small),
    );

    // Immutables
    --gs-shadow-color: rgba(0, 0, 0, 0.25);
    --gs-sprite-size: 32px;
    --gs-transition-time: 0.2s;
  }

  @include kardia.breakpoint-config(map.merge($_init-breakpoints, $breakpoints));

  @include font-pack.load((
    'global': map.get($global, 'family'),
    'supertitle': map.get($supertitle, 'family'),
    'title': map.get($title, 'family'),
    'subtitle': map.get($subtitle, 'family'),
    'body': map.get($body, 'family'),
    'mono': map.get($mono, 'family'),
    'small': map.get($small, 'family'),
  ));

  *,
  :before,
  :after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    color: inherit;
  }

  html {
    box-sizing: border-box;
    font-size: 100%;
  }

  body {
    background: kardia.key-create('body-fill', kardia.token-get('background'));
    color: kardia.key-create('body-ink', kardia.token-get('background-ink'));
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  span,
  a {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: kardia.primitive-token-get('line-height.normal');
  }

  main.content-wrap {
    $margin: 15px;
    width: calc(100% - #{$margin * 2});
    max-width: kardia.key-create('content-wrap-max-width', kardia.primitive-token-get('dimension.xl'));
    display: kardia.key-create('content-wrap-display', grid);
    grid-template-columns: repeat(kardia.key-create('content-wrap-cols', 4), 1fr);
    gap: kardia.key-create('content-wrap-gap', kardia.primitive-token-get('spacing.md'));
    margin: 0 auto;
    padding:
      kardia.key-create('content-wrap-padding-y', kardia.primitive-token-get('spacing.lg'))
      kardia.key-create('content-wrap-padding-x', kardia.primitive-token-get('spacing.none'));

    @include kardia.breakpoint-create('medium') {
      @include kardia.key-bind('content-wrap-cols', repeat(8, 1fr));
    }

    @include kardia.breakpoint-create('large') {
      @include kardia.key-bind('content-wrap-cols', repeat(12, 1fr));
    }
  }

  @content;
}