// Name:            Title
// Description:     Introduce a new section or module
//
// Component:       `c-title`
//
//
// Modifiers:       `c-title--border`
//                  `c-title--bullet`
//                  `c-title--featured`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//                  `settings/v7/global`
//                  `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/objects/v7/links' as *;
@use '../../../assets/sass/objects/v7/icons' as *;

@use '../../../assets/sass/tools/v7/utils'as *;
@use '../../../assets/sass/tools/v7/colors'as *;
@use '../../../assets/sass/tools/v7/mq'as *;
@use '../../../assets/sass/tools/v7/spacing'as *;
@use '../../../assets/sass/tools/v7/typography'as *;
@use '../../../assets/sass/tools/v7/zindex'as *;

@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/atomictypography.map' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/colors.map' as *;
@use '../../../assets/sass/settings/v7/sizes.map' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/typography.tokens' as *;
@use '../../../assets/sass/settings/v7/visibility.map' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/properties' as *;
@use '../../../assets/sass/settings/v7/scrollbar' as *;
// Variables
// ========================================================================

$title-background: var(--title-background);
$title-background-dark: var(--theme-color-darker);
$title-border: var(--title-border);
$title-divider-background: var(--background-color);
$title-divider-color: var(--divider-color);
$title-multiline-background: repeating-linear-gradient(to bottom, transparent, transparent 2px, $title-divider-color 2px, $title-divider-color 3px);

$title-height-logo: 40px;
$title-width-logo: 150px;
// ========================================================================

.c-title {

  // Custom properties
  // ======================================================================

  --title-background: #{$ui-03};
  --title-border: #{$ui-02};
  --title-text: #{$text-01};

  // ========================================================================

  position: relative;
  margin-bottom: $margin-medium;
  border-bottom: 1px solid $title-divider-color;
  color: var(--title-text);

  @if $layout!=amp{

    @media (prefers-color-scheme: dark) {
      body:not([data-color-scheme*="light"]):not([data-model*="sponsor"]) & {
        --title-text: #{$inverse-01};
        --title-border: #{$inverse-01};
      }
    }
  }

  @each $category, $name in $categories {
    @if ($category!="notizie"){ 
      @if $layout!=amp{
        @media (prefers-color-scheme: dark) {
          [data-theme="today"][data-channel^="/#{$category}/"]:not([data-color-scheme*="light"]) & {
            --title-text: #{grabcolor($categories, $category, base)};
            
            &.c-title--featured-multiline,
            &.c-title--featured {
              --title-border: #{$inverse-01};
              --title-text: #{$inverse-01};
            }
          }
        }
      
        [data-color-scheme*="dark"][data-theme="today"][data-channel^="/#{$category}/"] & {
          --title-border: #{grabcolor($categories, $category, dark)};
          --title-text: #{grabcolor($categories, $category, base)};
          
          &.c-title--featured-multiline,
          
          &.c-title--featured {
            --title-border: #{$inverse-01};
            --title-text: #{$inverse-01};
          }
        }
      }
  
      [data-theme="today"][data-channel^="/#{$category}/"]:not([data-color-scheme*="light"]) & {
        --title-border: #{grabcolor($categories, $category, dark)};
        --title-text: #{grabcolor($categories, $category, darker)};
        
        &.c-title--featured-multiline,
        &.c-title--featured {
          --title-border: #{$inverse-01};
          --title-text: #{$inverse-01};
        } 
      }
    }
  }
  @include type(title-03);

  @if $layout!=amp {

    &--multiline-small {
      font-size: type-size('primer', base);
    }
  
    &--featured {
      margin-bottom: 0;
    }
  
    &--featured,
    &--featured-multiline {
      padding: $padding-small;
      border-bottom: 0;
      background-color: $title-background;
      @include type(title-06);
      
      @media (prefers-color-scheme: dark) {
        body:not([data-color-scheme*="light"]):not([data-model*="sponsor"]) & {
          background-color: $ui-01-10;  
        }
      }
    }
  
    &--featured-multiline {
      --title-multiline-position: 10px;
    }
  
    //
    // Divider and color variations
    //
  
    #{$global-background-primary} & {
      border-bottom-color: var(--theme-color-light);
      
      &::after {
        background-color: var(--theme-color-light);
      }
  
      &--featured {
        background-color: $title-background-dark;
      }
    }
  
    .o-bg-dark[data-section-key*="focus-channel-cover"] & {
      &--featured {
        background-color: $ui-01-10;
        
      }
    } 
  }

  // ======================================================================
  
  body[data-channel*="/foto/"] &,
  body[data-model*="video"] &,
  body[data-channel*="/video/"] & {
    --title-text: #{$inverse-01};
    --title-border: #{$inverse-01};
  }

  //
  // Default title color values
  //
  body[data-model="show"]:not([data-color-scheme="user-light"]) &,
  body[data-channel*="/foto/"]:not([data-color-scheme="user-light"]) &,
  body[data-channel*="/video/"]:not([data-color-scheme="user-light"]) &,
  body[data-color-scheme*="dark"]:not([data-model*="sponsor"]) &,
  #{$global-background-dark} &,
  #{$global-background-primary} &,
  &--featured,
  &--featured-multiline {
    --title-border: #{$inverse-01};
    --title-text: #{$inverse-01};
  }

  &__logo {
    max-height: $title-height-logo;
    width: $title-width-logo;
  }

  &--multiline-small,
  &--featured-multiline {
    &::after {
      display: block;
      position: absolute;
      bottom: calc(var(--title-multiline-position) * -1);
      left: 0;
      content: '';
      width: 100%;
      height: 10px;
      // background-color: $title-divider-background;
      background-image: $title-multiline-background;
      background-repeat: repeat-x;
      background-position: bottom;
    }
  }
  
  &--multiline,
  &--multiline-small {
    --title-multiline-position: 13px;
    border-bottom: 3px solid $title-border;

    // body[data-channel*="dossier"] & ,
    // body[data-model*="approfondimento"] & {
    //   border-bottom: 3px solid $approfondimento-gray-light;
    // }
  }

  body[data-channel*="dossier"] & {
    --title-background: #{$ui-02};
  }

}