// Name:            Brand 
// Description:     Brand logo used across website
//
// Component:       `c-brand`
//
// Variants:        `c-brand--small`
//                  `c-brand--large`
//                  `c-brand--resize-small`
//                  `c-brand--resize-medium`
//                  `c-brand--inverse`
//                  `c-brand--alternate`
//
// Dependencies:    `settings/color.tokens`
// 									`themes/[theme-file]`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;

.c-brand {

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

  --brand-color: var(--theme-color); 
  --brand-color-alternate: var(--theme-color);
  --brand-network: #{$ui-02}; 
  --brand-height: 1.5rem;
  display: block;

  height: var(--brand-height);
  width: auto;
  @media (prefers-color-scheme: dark) {
    body:not([data-color-scheme*="light"]) & { 
      --brand-color-alternate: #{$inverse-01};
    }
  }

  @if $layout!=amp{
    &--large {
      --brand-height: 3.5rem;
      &.c-brand__text {
        font-size: 4.85rem;
      }
    }
  
    &--resize-small {
      --brand-height: 1.5rem;
      
      @include bp(xs) {
        --brand-height: 2rem;
        &.c-brand__text {
          font-size: 2.77rem;
        }
      }

      &.c-brand__text {
        font-size: 2.06rem;
      }
    }  

    &--resize-medium {
      --brand-height: 1.4rem;
        @include bp(xs) {
          --brand-height: 2rem;
          &.c-brand__text {
            font-size: 2.76rem;
          }
        }
        @include bp(md) {
          --brand-height: 3.25rem;
          &.c-brand__text {
            font-size: 4.5rem;
          }
        }
        &.c-brand__text {
          font-size: 2.08rem;
        }
      
    }
  }
  
  @if $layout!=amp{
    &__text {
      font-family: 'NovecentoNarrow';
      font-weight: 900;
      line-height: .7;
    }
  }
  
  // ======================================================================

  body:not([data-color-scheme*="light"]) & { 
    --brand-color-alternate: #{$inverse-01};
  }
  
  body:not([data-homepage]) .c-menu & {
    display: none;
  }
  //
  // Sizes
  //

  &--small {
    --brand-height: 1.5rem;
    max-width: 64vw;
    @if $layout!=amp{
      &.c-brand__text {
        font-size: 3.08rem;
      }
    }
  }
  
  //
  // Styles
  //

  &--inverse {
    fill: $ui-01;
    color: $ui-01;
  }

  &--alternate {
    fill: var(--brand-color-alternate);
    color: var(--brand-color-alternate);;
  }

  // Set default style for locals logo edtion

  &__edition {
    fill: var(--brand-color);
    
    @if $layout!=amp{
      .c-brand__text & {
        color: var(--brand-color);
      }
    }
    // Set brand-color to white with brand--inverse modifier

    .c-brand--inverse & {
      --brand-color: #{$ui-01};
    }

    // Assign theme-color variable from tablet and up devices

    .c-header:not(.c-header--inverse) & {
      --brand-color: #{$ui-01};
      @if $responsive-breakpoints {
        @include bp(md) {
          --brand-color: var(--theme-color);
        }
      }
    }


    body[data-edition*="europatoday"] .c-menu__brand &,
    body[data-edition*="europatoday"] .c-footer &,
    body[data-edition*="europatoday"] .c-header:not(.c-header--inverse) & {
      --brand-color: #{$color-europe};
    }
  }

  &__network {
    fill: var(--brand-network);
    @if $layout!=amp{
      .c-brand__text & {
        color: var(--brand-network);
      }
    }

    body[data-edition*="europatoday"] & {
      --brand-network: #{$ui-01};
    }
    
    .c-menu &,
    [data-color-scheme*="dark"] &,
    .c-header--wide-transparent &,
    .c-footer & {
      --brand-network: #{$ui-01};
    }

    // [data-channel*="/speciale/"] &,
    [data-model*="sponsor"] &,
    [data-color-scheme*="dark"][data-channel="/speciale/"][data-model*="sponsor"] & {
      --brand-network: #{$ui-01};
      fill: #{$ui-01};
    }

    body[data-model="show"]:not(body[data-edition*="europatoday"]) .c-header &,
    body[data-model*="video"]:not(body[data-edition*="europatoday"]) .c-header &,
    body[data-channel*="/foto/"]:not(body[data-edition*="europatoday"]) .c-header &,
    body[data-channel*="/video/"]:not(body[data-edition*="europatoday"]) .c-header &,
    body[data-color-scheme*="dark"]:not(body[data-edition*="europatoday"]) .c-header:not(.c-header--inverse) & {
      --brand-network: #{$ui-02};
      @if $responsive-breakpoints {
        @include bp(md) {
          --brand-network: #{$ui-01};
        }
      }
    }
  }
}

.c-brand-cn {
  fill: var(--background-color-muted-alpha);
  
  .c-menu & {
    fill: #{rgba($ui-01, .5)};
  }
}