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

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

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

.c-header {

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

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

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

  // 
  // Inverse variant
  //

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

  // 
  // Wide variant
  //

  &--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;
      @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);
        }
      }
    }
  } 

  
  //
  // Header channel
  //

  &__channel {
    --channel-link: var($ui-04);
    color: var(--channel-link);
    text-decoration: none;
    @include type(title-07);
    @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;

    @include bp(md) {
      min-width: 60%;
    }

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

  }

}

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

.c-navbar {

  &__subscription {
    right: 2rem;
    top: .9rem;
    @include bp(sm) {
      top: 1.2rem;
    }
  }

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

  }

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

  &__search {
    .c-header:not(.c-header--slim) &{
      @include bp(md) {
        margin-left: $margin-small;
      }
    }
  }

  &__item {
    --item-link-color: #{$ui-01};
    color: var(--item-link-color);
    @include bp(md) {
      --item-link-color: #{$ui-02};
    }
    white-space: nowrap;
    text-decoration: $link-decoration;
    position: relative;
    padding: $padding-small 0;
    transition: box-shadow .3s ease-in;
    @include type(nav-04);
    @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-channel*="foto"] &,
    body[data-model*="video"] &,
    body[data-channel*="video"] &,
    [data-color-scheme*="dark"] &{
      --item-link-color: #{$ui-01};
    }
  }

  &__search,
  &__controller {
    
    color: $icon-inverse;
    
    .c-header--inverse & {
      color: $icon-color;
    }
    @include bp(md) {
      color: $icon-color;
      @if $layout == amp {
        [data-theme="today"] & {
          color: $ui-01;
        }
      }
    }
  }
}

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

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

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

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

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