@use '../base/functions';
@use '../themes/colors';

/* Core CSS required for Ionic components to work properly */
@import '@ionic/angular/css/core';

@mixin ionic-color-map($ionic-variant, $kirby-variant: $ionic-variant) {
  --ion-color-#{$ionic-variant}: var(--kirby-#{$kirby-variant});
  --ion-color-#{$ionic-variant}-rgb: #{functions.get-color(
      #{$kirby-variant}-rgb,
      true,
      colors.$kirby-colors
    )};
  --ion-color-#{$ionic-variant}-contrast: var(--kirby-#{$kirby-variant}-contrast);
  --ion-color-#{$ionic-variant}-contrast-rgb: #{functions.get-color(
      #{$kirby-variant}-contrast-rgb,
      true,
      colors.$kirby-colors
    )};
  --ion-color-#{$ionic-variant}-shade: var(--kirby-#{$kirby-variant}-shade);
  --ion-color-#{$ionic-variant}-tint: var(--kirby-#{$kirby-variant}-tint);
}

:root {
  @include ionic-color-map('primary');
  @include ionic-color-map('secondary');
  @include ionic-color-map('tertiary');
  @include ionic-color-map('success');
  @include ionic-color-map('warning');
  @include ionic-color-map('danger');
  @include ionic-color-map('light');
  @include ionic-color-map('medium');
  @include ionic-color-map('dark');

  --ion-font-family: var(--kirby-font-family);
}