// Name:            Intro
// Description:     Show editor bio, description and social links
//
// Component:       `c-intro`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//
// ========================================================================

@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/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;


.c-intro {	

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

  --intro-avatar-size: 5rem;
  --intro-details-size: 55.5rem;
  --intro-bg-color: var(--background-color-contrast);
  --intro-border-color: var(--divider-color);
  --intro-text-decoration: var(--divider-color);
  --intro-text-decoration-hover: var(--link-color-dark);
  --intro-bg-social-icon: var(--link-color-dark);


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

  border-bottom-width: 1px;	
  border-bottom-style: solid;	
  border-bottom-color: var(--intro-border-color);
  border-top-width: 1px;	
  border-top-style: solid;	
  border-top-color: var(--intro-border-color);
  background-color: var(--intro-bg-color);
  @if $layout!=amp {
    @media (prefers-color-scheme: dark) {
      [data-theme="today"][data-channel*="opinioni"]:not([data-color-scheme*="light"]) &,
      body[data-theme="today"]:not([data-color-scheme*="light"]) &[data-channel*="opinioni"] {
        --intro-bg-color: #{$category-04-darker-alpha};
        --intro-border-color: #{$category-04-darker};
        --intro-title-text: #{$inverse-01};
        --intro-text-decoration: #{$category-04-darker};
        --intro-bg-social-icon: #{$category-04-darker};
      }
    }
    
    [data-theme="today"][data-color-scheme*="dark"][data-channel*="opinioni"] &,
    [data-theme="today"][data-color-scheme*="dark"] &[data-channel*="opinioni"] {
      --intro-bg-color: #{$category-04-darker-alpha};
      --intro-border-color: #{$category-04-darker};
      --intro-title-text: #{$inverse-01};
      --intro-text-decoration: #{$category-04-darker};
      --intro-bg-social-icon: #{$category-04-darker};
    }
  }

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

  body:not([data-color-scheme*="light"]) & {
    --intro-bg-social-icon: #{$ui-03};
  }

  //
  // Channel color variations
  //
  
  body[data-theme="today"] &[data-channel*="opinioni"],
  [data-theme="today"][data-channel*="opinioni"] & {
    --intro-bg-color: #{$category-04-lighter};
    --intro-border-color: #{$category-04};	    
    --intro-title-text: #{$category-04-darker}; 
    --intro-text-decoration: #{$category-04};	
    --intro-text-decoration-hover: #{$category-04-dark};
    --intro-bg-social-icon: #{$category-04-darker};  
  }	


  &::after {	
    position: absolute;	
    right: 0;	
    bottom: -5px;	
    content: '';	
    width: 100%;	
    height: 1px;	
    background-color: var(--intro-border-color);	
  }
  
  &__avatar {
    width: var(--intro-avatar-size);
    height: var(--intro-avatar-size);
		flex: 1 0 auto;
    margin-bottom: $margin-base;
    @if $responsive-breakpoints {

      @include bp(md) {
        margin-bottom: 0;
      }
    }
  }

  &__rank,
  &__title {
    color: var(--intro-title-text);
  }
  
  &__tags {
    padding-top: $padding-medium;
    border-top: 1px solid var(--divider-color);
  }

  // .c-share {
  //   display: none;
  //   @if $responsive-breakpoints {
  //     @include bp(md) {
  //       display: flex;
  //     }
  //   }
  // }

  .c-share__item {
    background-color: var(--intro-bg-social-icon);
  }

  &__details {
    // @if $responsive-breakpoints {
    //   @include bp(md) {
    //     max-width: var(--intro-details-size);
    //   }
    // }

    > p {
      margin: 0;

      > a,
      > strong > a {
        border-bottom: 1px solid var(--intro-text-decoration);	
        color: var(--link-color-dark);	
        text-decoration: none;	
        transition: border .2s ease-out;

        &:hover {
          border-bottom-color: var(--intro-text-decoration-hover);
        }	
      }
    }

    .c-intro__tags {
      .u-label-03 {
        border-bottom: none;
      }
    }
  }

  &[data-channel*="opinioni"] {
    --intro-bg-color: var(--background-color);
    --intro-avatar-size: 6rem;
  }
}