// Name:            Header
// Description:     Header of website
//
// Component:       `c-header`
//
// Variants:        `c-header--inverse`
// Variants:        `c-header--wide`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//                  `settings/v7/spacing.tokens`
//                  `settings/v7/typography.map`
//                  `tools/v7/typography`
//
// ========================================================================

// Variables
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/objects/v7/links' as *;
@use '../../../assets/sass/objects/v7/icons' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/typography' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;

$header-navbar-line: $global-active-line;

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

.c-header {

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

  --header-background: var(--theme-color);
  --nav-border: #{$ui-01};
  
  // ========================================================================
	
  background-color: var(--header-background);
  
  @if $layout == amp {
    [data-theme="today"] & {
      --header-background: var(--theme-color);
    }
  }

  @if $responsive-breakpoints {
    @include bp(md) {
      --nav-border: var(--theme-color);
      --header-background: var(--background-color-gray-dark);
    }
  }

  @if $layout == wide  {
    position: fixed;
    z-index: var(--header-z-index);
  }

  // 
  // Wide variant
  //
  @if $layout != amp  {
    &--wide-transparent {
      --header-z-index:99;
      z-index: var(--header-z-index);
      background-color: #{rgba($ui-06,.1)};
      body[data-model="sponsor"] & {
        --header-z-index: 999;
      }
    }
  }

  // 
  // Header focus area
  //

  // Check if $amp IS NOT true
  @if $layout != amp  {
    &__focus {
      display: none;
      @if $responsive-breakpoints {
        @include bp(lg) {
          display: block;
          margin-top: $margin-xsmall;
          margin-bottom: $margin-xsmall;
          padding: $padding-xsmall $padding-small;
          overflow: hidden;
        }
      }
  
      // Set background and link colors depending on [data-theme]
  
      body[data-theme="today"] & {
        background-color: var(--theme-color-darker);
  
        .o-link-text {
          color: $link-01;
        }
      }
  
      // Set background and link colors depending on [data-theme]
  
      body:not([data-theme="today"]) & {
        background-color: var(--background-color);

        .o-link-text {
          color: var(--link-color-dark);
        }
      }
    }
  }

  // 
  // Inverse variant
  //

  &--inverse{
    --header-background: var(--background-color);
  }

  
  //
  // Header channel
  //

  &__channel {
    --channel-link: var($ui-04);
    color: var(--channel-link);
    text-decoration: none;
    @include type(title-07);

    @if $responsive-breakpoints {
      @include bp(md){
        @include type(title-03);
      }
    }

    // Hide channel title when header varianti is 'inverse'
    
    .c-header--inverse & {
      display: none;
    }
  }

  //
  // Header top section
  //

  &__top {
    position: relative;
    @if $responsive-breakpoints {
      @include bp(md) {
        min-width: 60%;
      }
    }
    // box-shadow: inset 0 -1px rgba($ui-01, .15);
    
    &::after {
      display: block;
      position: absolute;
      bottom: 0;
      content: '';
      margin: 0 calc(var(--outer-gutter) * -1);
      width: calc(100% + var(--outer-gutter) * 2);
      height: 1px;
      background-color: $ui-01-10;
      @if $responsive-breakpoints {
        @include bp(md) {
          display: none;
        }
      }
    }

  }

}

// Navbar
// ========================================================================

.c-navbar {
  
  @if $layout != amp  {
    &__search {
      .c-header:not(.c-header--slim) &{
        @if $responsive-breakpoints {
          @include bp(md) {
            margin-left: $margin-small;
          }
        }
      }
    }
  }

  &__subscription {
    top: .9rem;
    right: 2rem;
    @if $responsive-breakpoints {
      @include bp(sm) {
        top: 1.2rem;
      }
    }
  }

  &__toggle {
    position: absolute;
    top: $padding-base;
    right: 0;
    margin-left: auto;
    @include z(higher);
    @if $responsive-breakpoints {
      @include bp(sm) {
        top: 1.25rem;
      }
      @include bp(md) {
        position: relative;
        top: auto;
        right: auto;
        margin-left: $margin-medium;
      }
    }

  }

  &__toggle-shadow {
    top: $padding-xsmall;
    right: $padding-xsmall;
    border-radius: $global-radius;
    background-color: rgba(21,16,16,.55);
    height: $margin-large;
    width: $margin-large;
    @include z(upside);
    body:not([data-homepage]) & {
      display: none;
    }
  }

  &__item {
    --item-link-color: #{$ui-01};
    position: relative;
    color: var(--item-link-color);
    white-space: nowrap;
    text-decoration: $link-decoration;
    padding: $padding-small 0;
    transition: box-shadow .3s ease-in;
    @if $responsive-breakpoints {
      @include bp(md) {
        --item-link-color: #{$ui-02};
      }
    }
    @include type(nav-04);
    @if $responsive-breakpoints {
      @include bp(md) {
        @include type(nav-06);
      }
    }

    & + & {
      margin-left: $margin-base;
    }

    &:hover,
    &.is-active {
      box-shadow: inset 0 -#{$header-navbar-line} var(--nav-border);
     
    }

    body[data-model="show"],
    body[data-channel*="/foto/"] &,
    body[data-model*="video"] &,
    body[data-channel*="/video/"] &,
    [data-color-scheme*="dark"] &{
      --item-link-color: #{$ui-01};
    }
  }

  &__search,
  &__controller {
    
    color: $icon-inverse;

    @if $layout == amp {
      [data-theme="today"] & {
        color: $ui-01;
      }
    }

    @if $responsive-breakpoints {
      @include bp(md) {
        color: $icon-color;
      }
    }
    
    .c-header--inverse & {
      color: $icon-color;
    }
  }
}

[data-toggle-menu] {
  &.is-active {
    [data-toggle-menu-open] {
      display: none;
    }

    [data-toggle-menu-close] {
      display: block;
    }
  }
  
  [data-toggle-menu-open] {
    display: block;
  }

  [data-toggle-menu-close] {
    display: none;
  }
}

@if $layout!=amp {

  [data-search] {
    &.is-active {
      [data-search-open] {
        display: none;
      }

      [data-search-close] {
        display: block;
      }
    }

    [data-search-open] {
      display: block;
    }

    [data-search-close] {
      display: none;
    }
  }
}