// Name:            Subheader
// Description:     Subheader of website
//
// Component:       `c-subheader`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//                  `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
// ========================================================================

$subheader-nav-line-height: 3px;
$subheader-nav-line-active: var(--nav-active-bg);
$subheader-nav-line-hover: var(--nav-active-bg-hover);
$subheader-height-logo: 40px;
$subheader-width-logo: 200px;
$subheader-custom-spacing: 26px;

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

.c-subheader {

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

  --subheader-border: transparent;
  --subheader-navbar-spacing: 0;
  --subheader-item-spacing: #{$padding-base};
  
  // Category color variations
  // Default colors are applied to 'notizie' or '/' data-channel

  --subheader-border: var(--divider-color);
  --subheader-text: var(--body-color);
  --subheader-title: var(--body-color);
  --subheader-text-hover: var(--hover-02, #{$hover-04});

  // ======================================================================
  
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--subheader-border);
  background-color: var(--subheader-background, var(--background-color)); //var(--subheader-background);
  background-image: var(--subheader-background-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--subheader-background-size);
  transition: $global-interactive-transition;

  @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"]) & {
            --subheader-background: #{rgba(grabcolor($categories, $category, darker), .25)};  
            --subheader-text: #{$inverse-01};
            --subheader-border: #{grabcolor($categories, $category, darker)};
          }
        }
      
        [data-color-scheme*="dark"][data-theme="today"][data-channel*="#{$category}"] & {
          --subheader-background: #{rgba(grabcolor($categories, $category, darker), .25)};  
          --subheader-text: #{$inverse-01};
          --subheader-border: #{grabcolor($categories, $category, darker)};
        }
      }
      [data-theme="today"][data-channel*="#{$category}"] & {
        --subheader-border: #{grabcolor($categories, $category, base)};
        --subheader-background: #{grabcolor($categories, $category, lighter)};
        --subheader-text: #{grabcolor($categories, $category, darker)};
        --subheader-text-hover: #{grabcolor($categories, $category, base)};  
      } 
      [data-theme="today"][data-channel*="/gossip"] & {
        --subheader-background: #8947a3;
        --subheader-text: #fff;
      }
    }
  } 

  &::after {
    position: absolute;
    right: 0;
    bottom: -5px;
    content: '';
    width: 100%;
    height: 1px;
    background-color: var(--subheader-border);

    [data-channel*="dossier"] & {
      display: none;
    }
  }

  > div:first-child {
    @include bp(md){
      gap: #{$padding-small};
    }
  }

  // Hide ::after border when modifier is branded

  &.c-subheader--branded::after{
    display: none;
  }

  //
  // Subheader List
  // 
  
  &__list {
    display: none;
    position: relative;
    width: 100%;
    margin-top: $margin-xxsmall;
    margin-left: 0;
    padding-left: 0;
    @if $responsive-breakpoints {
      @include bp(lg) {
        position: absolute;
        left: 0;
        width: auto;
        min-width: 100%;
        margin-top: 0;
      }
    }

    [data-subheader-item]:focus &,
    [data-subheader-item]:hover & {
      display: flex;
      top: 100%;
      background-color: var(--subheader-background-active, var(--background-color));
    }
  }
  
  //
  // Subheader Main List
  // 
  
  &__main-list {
    margin-right: -$padding-small;
    margin-left: -$padding-small;
    @if $responsive-breakpoints {
      @include bp(lg) {
        margin: 0;
      }
    }
  }

  //
  // Subheader Title
  // 

  &__title {
    color: var(--subheader-title);
  }
  
  //
  // Subheader Navbar
  // 

  &__navbar {
    // padding-top: var(--subheader-navbar-spacing);
    // Custom Firefox scrollbar style 
    scrollbar-width: thin;

    @if $layout!=amp {

      // Navbar Large Variant

      &--lg {
        --subheader-navbar-spacing: 0;
        display: none;
        @include bp(lg) {
          display: block;
          border-top: 1px solid var(--subheader-light-line);
        }

        &.is-open {
          display: block;
        }
      }
    }
        
    // Webkit scrollbar style
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    &::-webkit-scrollbar-track,
    &::-webkit-scrollbar-thumb {
      -webkit-border-radius: 8px; 
    }

    &::-webkit-scrollbar-track {
      background: var(--background-color-light);
    }

    &::-webkit-scrollbar-thumb {
      background: var(--theme-color-light);
    }

    .c-subheader__head ~ & {
      // Remove padding top when adiacent to subheader head
      --subheader-navbar-spacing: 0;
      @if $responsive-breakpoints {
        // Restore padding top on medium devices
        @include bp(md) {
          --subheader-navbar-spacing: #{$subheader-custom-spacing};
        }
      }
    }
  }


  &__subnavbar {
    backdrop-filter: brightness(90%);
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      content: '';
      height: 1px;
      background-color: var(--subheader-border);
    }
  }

  //
  // Subheader Item
  //

  &__item {
    padding-top: var(--subheader-item-spacing); 
    padding-bottom: var(--subheader-item-spacing );
    color: var(--subheader-text);
    @include z(cover);

    &:hover {
      color: var(--subheader-text-hover);
    }

    // Subheader item children of Main List

    .c-subheader__main-list > & {
      padding-right: $padding-base;
      padding-left: $padding-base;
      @include bp(lg) {
        padding-right: $padding-xsmall;
        padding-left: $padding-xsmall;
      }
    }

    .c-subheader__head ~ .c-subheader__navbar & {
      // Remove padding top when adiacent to subheader head
      //padding-top: 0;

      // Change item spacing from medium devices
      @include bp(md) {
        --subheader-item-spacing : #{$subheader-custom-spacing};
      }
    }

    // Active state modifier

    &--active {
      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 100%;
        height: $subheader-nav-line-height;
        background-color: var(--subheader-text);

        .c-subheader__navbar--lg & {
          width: $subheader-nav-line-height;
          height: 100%;
          @include bp(lg) {
            width: 100% ;
            height: $subheader-nav-line-height;
          }
        }
      }
    }

    // Small modifier

    &--small {
      width: 50%;
      padding-right: $padding-small;
      padding-left: 0;
      @include bp(lg) {
        width: 100%;
        padding-left: $padding-small;
      }
    }

    // Subheader item children of Navbar Large

    .c-subheader__navbar--lg & {
      width: 100%;
      @include type(nav-02);
      @include bp(lg) {
        font-size: type-size("brevier", base);
        width: auto;
      }

      &:focus,
      &:hover {
        outline: none; 
        background-color: var(--subheader-background-active, var(--background-color));
        color: var(--subheader-text);

        &::after {
          display: none;
        }

        [data-subheader-arrow] {
          transform: rotate(180deg);
        }
      }

      &:first-child {
        margin-left: 0;
      }
    }

  }
  

  //
  // Subheader Avatar
  // 

  &__avatar {
    margin-bottom: $margin-xsmall;
    @include bp(md) {
      margin-right: $margin-xsmall;
      margin-bottom: 0;
    }
  }

  //
  // Subheader Logo
  // 

  &__logo {
    max-height: $subheader-height-logo;
    // min-width: $subheader-width-logo;
  }

  // approfondimento custom values

  body[data-channel*="dossier"] & {
    --subheader-background: #{$ui-02};
    --subheader-text: #{$ui-01};
    .c-subheader__item--active::after{
      @if $layout==amp {
        background-color: #FFFF00;
      }
      @else {
        background-color: var(--component-color-accent);
      }
    }

    .c-dossier-logo path {
      fill: #{$ui-01};
    }
  }
  
}