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

$menu-background: var(--theme-color);
$menu-panel-height: 87vh;
$menu-logo-size: 20px;
$menu-navbar-line: $global-active-line;
$menu-divider-color: rgba($ui-01, .3);

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

.c-menu {

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

  --nav-border: var(--theme-color);
  --menu-divider-color: #{rgba($ui-01, .3)};
  --menu-background: #{$ui-02};
  display: none;
  right: 100%;
  background-color: var(--menu-background);

  // ========================================================================
  @if $layout==wide {
    position: fixed;
  }
  @else {
    position: absolute;
  }
  @include z(underneath);
  @if $responsive-breakpoints {
    @include bp(md) {
      --menu-background: #{$ui-05};
      --menu-divider-color: #{rgba($ui-07, .3)};
      right: 0;
      min-height: auto;
    }
  }

  @if $responsive-breakpoints {
    body[data-model*="video"]:not([data-theme="today"]) &,
    body[data-channel*="/foto/"]:not([data-theme="today"]) &,
    body[data-channel*="/video/"]:not([data-theme="today"]) &,
    body[data-color-scheme*="dark"]:not([data-theme="today"]) &{
      @include bp(md) {
        --menu-background: #{$ui-07};
        --menu-divider-color: #{rgba($ui-01, .3)};
      }  
    }
  }

  &.is-open {
    --menu-bottom: 0;
    display: block;
    position: var(--menu-position);
    top: var(--menu-top);
    right: 0;
    bottom: var(--menu-bottom);
    padding-top: var(--menu-padding-top);
    overflow-y: scroll;
  
    @if $layout==amp {
      --menu-top: 56px;
      z-index: 2147483647;
      max-width: 100%;
      padding: 0 $padding-small;
    }
    @else if $layout==wide {
      --menu-background: #{$ui-02} !important;
      --menu-position: fixed;
      --menu-padding-top: 64px;
      --menu-top: 64px;
      @include z(cover);
    }
    @else {
      --menu-top: 0;
      --menu-position: absolute;
      animation: slidein .3s ease-in-out;
      @include z(upside);
      
      @media (max-width:739px) {
        [data-fullpage][data-homepage] & {
          --menu-position: fixed;
        }
      }
      @if $responsive-breakpoints {

        @include bp(xs) {
          body:not([data-homepage]) & {
            --menu-padding-top: 64px;
  
          }
        }
  
        @include bp(md) {
          --menu-bottom: auto;
         
          --menu-padding-top: #{$padding-xlarge};
          --menu-position: absolute;
          animation: none;
          overflow: hidden;
          @if $layout!=wide {
            --menu-top: 182px;
          }
  
          [data-branded] &,        
          [data-model*="sponsor"] & {
            --menu-top: 64px;
          }
          [data-model*="sponsor"][data-channel*="speciale"] & {
            --menu-top: 56px;
          }
          
        }
      }
      [data-channel*="/speciale"] & {
        @include bp(md) {
          --menu-top: 56px;
        }
      }

      body:not([data-homepage]) & {
        --menu-padding-top: 56px;
      }

    }
    
  }

  &__brand {
    display: none;
    body[data-homepage] & {
      display: block;
      @if $responsive-breakpoints {
        @include bp(md) {
          display: none;
        }
      }
    }
  }

  //
  // Menu Group - contains a Title and a List
  //

  &__group {
    --menu-group-my: calc(var(--outer-gutter) * -1);
    outline: none;
    margin: 0 var(--menu-group-my);
    @if $responsive-breakpoints {
      @include bp(md) {
        --menu-group-my: 0;
        
        &:not(:first-child) {
          padding-left: $padding-base;
          border-left: 1px solid var(--menu-divider-color);
        }
      }
      @include bp(md, max-width) {
        &:first-child {
          border-top: 1px solid var(--menu-divider-color);
        }
      }
    }
  }

  //
  // Menu List - navigation menu
  //

  &__list {
    display: none;
    margin: 0;
    padding: 0 0 0 $padding-base;
    border-bottom: 1px solid var(--menu-divider-color);
    @if $responsive-breakpoints {
      @include bp(md) {
        display: flex;
        flex-direction: column;
        padding: 0;
        border-bottom: 0;
      }
    }

    .c-menu__group > input[type="checkbox"]:checked ~ & {
      display: flex;
    }
  }

  //
  // Menu Title - title of menu list
  //

  &__title {
    padding: $padding-small;
    border-bottom: 1px solid var(--menu-divider-color);
    @include type(nav-01);
    @if $responsive-breakpoints {
      @include bp(md){
        margin-bottom: $margin-base;
        padding: 0;
        border-bottom: 0;
        @include type(nav-05);
      }
    }
    
    .c-menu__group:focus &,
    .c-menu__group:hover & {
      box-shadow: inset #{$menu-navbar-line} 0 var(--nav-border);
      @if $responsive-breakpoints {
        @include bp(md) {
          box-shadow: none;
        }
      }
    }
  }

  &__logo {
    width: auto;
    height: $menu-logo-size;
  }

  &__icon {   
    .c-menu__group > input[type="checkbox"]:checked ~ .c-menu__title & {
      transform: rotate(180deg);
    }
  }

  &__link{
    --menu-link: #{$link-01};
    color: var(--menu-link);
    @if $responsive-breakpoints {
      @include bp(md) {
        --menu-link: #{$link-02};
      }
    }

    [data-model*="video"] &,
    [data-channel*="/foto/"] &,
    [data-channel*="/video/"] &,
    [data-color-scheme*="dark"] &{
      @if $responsive-breakpoints {
        @include bp(md) {
          --menu-link: #{$link-01};
        }  
      }
    }
  }

  &__search {
    display: flex;
    @if $responsive-breakpoints {
      @include bp(md) {
        display: none;
      }
    }
  }
}

// Set different top value for menu opened by menu toggle in header slim
body:not([data-homepage]),
body[data-branded] {
  .c-header--slim ~ .c-menu {
    --menu-top: 56px;
    --menu-padding-top: 0;
    @include bp(xs) {
      --menu-top: 64px;
    }
    @if $layout==standard {
      @include bp(md) {
        --menu-top: 114px;
        --menu-padding-top: #{$padding-medium};
      }
    }
  }
}

// Set different top value for menu opened by menu toggle in header motion

@if $layout==wide {
  .c-header--wide-transparent ~ .c-menu.is-open {
    --menu-top: 0;
    @include bp(md) {
      --menu-top: 64px;
    }
  }
}
@if $responsive-breakpoints {
  .alert.alert-network ~ .c-menu.is-open {
    @include bp(md) {
      --menu-top: 250px;
    }
  }
}