Title: Title featured multiline

// 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`
//
// ========================================================================

// 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};

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

  @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"){
  
      [data-theme="today"][data-channel^="/#{$category}/"]:not([data-color-scheme*="light"]) & {
        --title-border: #{color($categories, $category, dark)};
        --title-text: #{color($categories, $category, darker)};
        
        &.c-title--featured-multiline,
        &.c-title--featured {
          --title-border: #{$inverse-01};
          --title-text: #{$inverse-01};
        } 
      } 
      @media (prefers-color-scheme: dark) {
        [data-theme="today"][data-channel^="/#{$category}/"]:not([data-color-scheme*="light"]) & {
          --title-text: #{color($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: #{color($categories, $category, dark)};
        --title-text: #{color($categories, $category, base)};
        
        &.c-title--featured-multiline,
        
        &.c-title--featured {
          --title-border: #{$inverse-01};
          --title-text: #{$inverse-01};
        }
      }
    }
  }

  //
  // Default title color values
  //
  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};
  }

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

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

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

  &--multiline-small,
  &--featured-multiline {
    &::after {
      position: absolute;
      bottom: calc(var(--title-multiline-position) * -1);
      left: 0;
      content: '';
      display: block;
      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;
    }
  }

  &--multiline-small {
    font-size: $primer;
  }

  &--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"]) & {
        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;
      
    }
  } 
}