// Copyright (c) 2014, 2025, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// WARNING: do not directly import this file, instead import the 
//          version in your base theme's directory, 
//          for example alta/widgets/_oj.alta.tags.typography.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@import "../../utilities/oj.utilities";


@mixin oj-local-font-face($family, $weight, $fontList) {
  @font-face {
    font-family: $family;
    font-weight: $weight;
    
    $fontSrc: null;

    @each $fontName in $fontList
    {
      $fontSrc: append($fontSrc, local($fontName), 'comma');
    }

    src: $fontSrc;
  }
}


@if $includeTagsTypographyClasses != false {
  @include module-include-once("common.tagstypography") {


    @include oj-tag-selectors(
      $tagSelectors:   "a", 
      $classSelectors: ".oj-link") {

          color: $linkTextColor;
          text-decoration: $linkTextDecoration; 

        line-height: inherit;
    }


    @include oj-tag-selectors(
      $tagSelectors:   "a:visited", 
      $classSelectors: ".oj-link:visited") {

          color: $linkTextColorVisited; 

    }


      @include oj-tag-selectors(
        $tagSelectors:   "a:hover, a:focus", 
        $classSelectors: ".oj-link:hover, .oj-link:focus") {

            text-decoration: $linkTextDecorationHover;

      }

      @include oj-tag-selectors(
        $tagSelectors:   "a:active", 
        $classSelectors: ".oj-link:active") {

            color: $linkTextColorActive;
            font-weight: $linkFontWeightActive;
            background-color: $linkBgColorActive;
            @include oj-border-radius($smallBorderRadius);

      }

      @include oj-tag-selectors(
        $tagSelectors:   "a.oj-disabled", 
        $classSelectors:  ".oj-link.oj-disabled") {

            color: $linkTextColorDisabled;
            opacity: $opacityDisabled;

          cursor: default;
          text-decoration: none;
      }


      /* header */
      /* --------------------------------------------------------------- */
      @include oj-tag-selectors(
        $tagSelectors:   "h1, h2, h3, h4, h5, h6",
        $classSelectors: ".oj-header") {

            color: $headerTextColor; 

         font-family: inherit;
         font-style: normal;
         margin: 8px 0;
         padding: 0 0 2px;
      }


      @include oj-tag-selectors(
        $tagSelectors:   "h1", 
        $classSelectors: "h1.oj-header") {

            font-size: $header1FontSize;
            font-weight: $header1FontWeight;

      }

      @include oj-tag-selectors(
        $tagSelectors:   "h2", 
        $classSelectors: "h2.oj-header") {

            font-size: $header2FontSize; 
            font-weight: $header2FontWeight;

      }

     
      @include oj-tag-selectors(
        $tagSelectors:   "h3", 
        $classSelectors: "h3.oj-header") {

            font-size: $header3FontSize; 
            font-weight: $header3FontWeight;

      }

      
      @include oj-tag-selectors(
        $tagSelectors:   "h4", 
        $classSelectors: "h4.oj-header") {

            font-size: $header4FontSize; 
            font-weight: $header4FontWeight;

      }

      
      @include oj-tag-selectors(
        $tagSelectors:   "h5", 
        $classSelectors: "h5.oj-header") {

            font-size: $header5FontSize; 
            font-weight: $header5FontWeight;

      }
      
      @include oj-tag-selectors(
        $tagSelectors:   "h6", 
        $classSelectors: "h6.oj-header") {
          font-size: $header6FontSize; 
          font-weight: $header6FontWeight;
      }


      .oj-typography-heading-2xl,
      .oj-typography-title-1 {
        font-size: $header1FontSize !important;
        font-weight: $header1FontWeight !important;
      }

      .oj-typography-heading-xl,
      .oj-typography-title-2 {
          font-size: $header2FontSize !important;
          font-weight: $header2FontWeight !important;
      }

      .oj-typography-heading-lg,
      .oj-typography-title-3 {
          font-size: $header3FontSize !important;
          font-weight: $header3FontWeight !important;
      }

      .oj-typography-heading-md,
      .oj-typography-title-4 {
          font-size: $header4FontSize !important;
          font-weight: $header4FontWeight !important;
      }

      .oj-typography-heading-sm,
      .oj-typography-title-5 {
          font-size: $header5FontSize !important;
          font-weight: $header5FontWeight !important;
      }

      .oj-typography-heading-xs,
      .oj-typography-title-6 {
          font-size: $header6FontSize !important;
          font-weight: $header6FontWeight !important;
      }

      .oj-typography-subheading-2xl,
      .oj-typography-subtitle-1 {
        font-size: 1.25rem !important;
        font-weight: normal !important;
      }

      .oj-typography-subheading-xl,
      .oj-typography-subtitle-2 {
        font-size: 1.125rem !important;
        font-weight: normal !important;
      }

      .oj-typography-subheading-lg,
      .oj-typography-subtitle-3 {
        font-size: 1rem !important;
        font-weight: normal !important;
      }

      .oj-typography-subheading-md,
      .oj-typography-subtitle-4 {
        font-size: .875rem !important;
        font-weight: normal !important;
      }

      .oj-typography-subheading-sm {
        font-size: .875rem !important;
        font-weight: normal !important;
      }

      .oj-typography-subheading-xs {
        font-size: .875rem !important;
        font-weight: normal !important;
      }


      .oj-typography-body-xl {
        font-size: 1.25rem !important;
        font-weight: normal !important;
      }

      .oj-typography-body-lg,
      .oj-typography-body-1 {
        font-size: 1.125rem !important;
        font-weight: normal !important;
      }

      .oj-typography-body-md,
      .oj-typography-body-2 {
        font-size: 1rem !important;
        font-weight: normal !important;
      }

      .oj-typography-body-sm,
      .oj-typography-body-3 {
        font-size: .85714rem !important;
        font-weight: normal !important;
      }
      .oj-typography-body-xs,
      .oj-typography-caption-1 {
        font-size: .78571rem !important;
        font-weight: normal !important;
      }

      .oj-typography-body-2xs,
      .oj-typography-caption-2 {
        font-size:   .6875rem !important;
        font-weight: normal !important;
      }    

      .oj-typography-semi-bold {
        font-weight: 500 !important;
      }
      
      .oj-typography-bold {
        font-weight: 700 !important;
      }


      /* hr */
      /* --------------------------------------------------------------- */
      @include oj-tag-selectors(
        $tagSelectors:   "hr", 
        $classSelectors: ".oj-hr") {

            border: solid $headerBorderColor;

          border-width: 1px 0 0;
          margin: 7px 0;
      }
      

      /* p */
      /* --------------------------------------------------------------- */
      @include oj-tag-selectors(
        $tagSelectors:   "p", 
        $classSelectors: ".oj-p") {
            margin: 0 0 12px 0;
      }



    .oj-header-border {

        border: solid $headerBorderColor;
      
        border-width: 0 0 1px;
        padding: 0 0 7px;
    }

    @if $fontWeightNormalization
    {


      $fontWeightKeys: 100,200,300,400,500,600,700,800,900; 
      
      @if index($fontFamily, 'Segoe UI') != null{
        
        $fontWeightToFamilySegoeUI: (
          100: "Segoe UI Light",
          200: ("Segoe UI Semilight","Segoe UI Light"),
          300: ("Segoe UI Semilight","Segoe UI Light"),
          400: "Segoe UI",
          500: "Segoe UI Semibold",
          600: "Segoe UI Semibold",
          700: "Segoe UI Bold",
          800: "Segoe UI Bold",
          900: "Segoe UI Bold"
        );
        
        @each $fontWeightKey in $fontWeightKeys {
          @include oj-local-font-face("Segoe UI", $fontWeightKey, map-get($fontWeightToFamilySegoeUI, $fontWeightKey));
        }
      }

      // needed for Roboto on chrome
      @if (index($fontFamily, 'Roboto') != null or 
           index($fontFamily, 'Arial') != null)
      {
        $fontWeightToFamilyArial: (
          100: ("sans-serif-thin", "Arial"),
          200: ("sans-serif-thin", "Arial"),
          300: ("sans-serif-light", "Arial"),
          400: ("sans-serif-regular", "Arial"),
          500: ("sans-serif-medium", "Arial"),
          600: ("sans-serif-medium", "Arial"),
          700: ("sans-serif-bold", "Arial Bold"),
          800: ("sans-serif-bold", "Arial Bold"),
          900: ("sans-serif-bold", "Arial Bold"),
        );
        
        @each $fontWeightKey in $fontWeightKeys {
          @include oj-local-font-face("Arial", $fontWeightKey, map-get($fontWeightToFamilyArial, $fontWeightKey));
        }
      }

      @if (index($fontFamily, 'Helvetica Neue') != null or 
           index($fontFamily, 'BlinkMacSystemFont') != null or 
           index($fontFamily, '-apple-system') != null )
      {
        $fontWeightToFamilyHelveticaNeue: (
          100: "HelveticaNeue-Ultralight",
          200: "HelveticaNeue-Thin",
          300: "HelveticaNeue-Light",
          400: "Helvetica Neue",
          500: "HelveticaNeue-Medium",
          600: "HelveticaNeue-Medium",
          700: "HelveticaNeue-Bold",
          800: "Helvetica-Bold",
          900: "Helvetica-Bold",
        );



        @each $fontWeightKey in $fontWeightKeys {
          @include oj-local-font-face("Helvetica Neue", $fontWeightKey, map-get($fontWeightToFamilyHelveticaNeue, $fontWeightKey));
        }
      }
    }

  }

}
