{"version":3,"sourceRoot":"","sources":["../../src/css/ionic/typography.ionic.scss","../../src/themes/ionic/ionic.mixins.scss"],"names":[],"mappings":"AAGA,KACE,mCAGF,KC+DE,2CACA,kDAEA,sDACA,4EAEA,qBACA,oBDjEF,GC0DE,2CACA,kDAEA,sDACA,4EAEA,qBACA,oBD7DF,GCsDE,2CACA,kDAEA,sDACA,4EAEA,qBACA,oBDzDF,GCkDE,2CACA,kDAEA,sDACA,4EAEA,qBACA,oBDrDF,GC8CE,2CACA,kDAEA,sDACA,4EAEA,qBACA,oBDjDF,GC0CE,2CACA,kDAEA,sDACA,4EAEA,qBACA,oBD7CF,GCsCE,2CACA,kDAEA,sDACA,4EAEA,qBACA","file":"typography.ionic.css","sourcesContent":["@use \"../../themes/ionic/ionic.globals.scss\" as globals;\n\n// TODO(ROU-10833): add font loading solution here, as a @font-face, base64 or cdn\nhtml {\n  font-family: var(--ion-font-family);\n}\n\nbody {\n  @include globals.typography(globals.$ion-body-md-regular);\n}\n\n/* Override html headings based on heading tokens */\nh1 {\n  @include globals.typography(globals.$ion-heading-h1-regular);\n}\n\nh2 {\n  @include globals.typography(globals.$ion-heading-h2-regular);\n}\n\nh3 {\n  @include globals.typography(globals.$ion-heading-h3-regular);\n}\n\nh4 {\n  @include globals.typography(globals.$ion-heading-h4-regular);\n}\n\nh5 {\n  @include globals.typography(globals.$ion-heading-h5-regular);\n}\n\nh6 {\n  @include globals.typography(globals.$ion-heading-h6-regular);\n}\n","// Ionic Mixins\n// forward the global mixin to be used on component scope\n@forward \"../mixins\";\n// use global mixins on this ionic.mixin context\n@use \"../mixins\" as mixins;\n@use \"../../foundations/ionic.vars.scss\" as tokens;\n\n// Pressed mixin to be used on pseudo elements for the Ionic Theme pressed state\n//\n// ex: :host(.ion-activated) .toggle-icon:after {\n//       @include globals.pressed-state();\n//      }\n//\n// --------------------------------------------------\n@mixin pressed-state() {\n  @include mixins.position(0, 0, 0, 0);\n\n  position: absolute;\n\n  background-color: tokens.$ion-state-press;\n\n  content: \"\";\n}\n\n// Disabled mixin to be used on pseudo elements for the Ionic Theme disabled state\n//\n// ex: :host(.checkbox-disabled) .native-wrapper:after {\n//       @include globals.disable-state();\n//      }\n//\n// --------------------------------------------------\n@mixin disabled-state() {\n  @include mixins.position(0, 0, 0, 0);\n\n  position: absolute;\n\n  background-color: tokens.$ion-state-disabled;\n\n  content: \"\";\n\n  pointer-events: none;\n}\n\n// Focused mixin to be used on regular elements for the Ionic Theme focused state\n//\n// ex: :host(.ion-focused) .toggle-icon {\n//       @include globals.focused-state();\n//      }\n//\n// --------------------------------------------------\n@mixin focused-state($width: null, $style: null, $color: null, $addOffset: true) {\n  // Use default values if null is passed\n  $width: if($width != null, $width, tokens.$ion-border-size-050);\n  $style: if($style != null, $style, tokens.$ion-border-style-solid);\n  $color: if($color != null, $color, tokens.$ion-border-focus-default);\n\n  @if $addOffset {\n    outline-offset: $width;\n  }\n\n  outline: $width $style $color;\n}\n\n// Typography mixin to be used with typography scss variables (ionic.vars.scss)\n//\n// ex: @include typography($ion-heading-h3-medium);\n//\n// --------------------------------------------------\n@mixin typography($properties) {\n  font-family: map-get($properties, font-family);\n  font-size: map-get($properties, font-size);\n  font-weight: map-get($properties, font-weight);\n\n  letter-spacing: map-get($properties, letter-spacing);\n  line-height: map-get($properties, line-height);\n\n  text-decoration: map-get($properties, text-decoration);\n  text-transform: map-get($properties, text-transform);\n}\n"]}