// Name:            Readingbar
// Description:     Progress bar showing how much content user read
//
// Component:       `c-readingbar`
//
// Dependencies:    `settings/v7/colors.theme`
//                  `settings/v7/global`
@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 *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;
// ========================================================================

// Variables
// ========================================================================

$readingbar-height: 48px;

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

@keyframes progress-driven {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
section:has(>.c-readingbar),
div:has(>.c-readingbar) {
  position: relative;
  @supports not (animation-timeline: scroll()) {
    margin-top: calc(#{$readingbar-height} + $margin-xxxsmall);
  }
}

.locked ~ .c-readingbar {
  display: none;
}

.c-entry:has(>.c-readingbar):has(div>.c-readingbar)  {
  >.c-readingbar {
    display: none;
  }
}


.c-readingbar {
  --_readingbar-position: absolute;
  --_readingbar-top: -70px;
  position: var(--_readingbar-position);
  top: var(--_readingbar-top);
  @supports (animation-timeline: scroll()) {
    --_readingbar-position: sticky;
    border-top: 4px solid var(--background-color-gray-dark);
    bottom: 0;
    top: auto;
  }
  [data-model*="approfondimento"] & {
    padding-left: $padding-small;
    padding-right: $padding-small;
    --_readingbar-top: -56px  ;
  }
  &::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    height: 4px;
    background-color: var(--theme-color);
    z-index: -1;
    @media (prefers-color-scheme: dark) {  
      body[data-theme="today"]:not([data-color-scheme*="light"]):not([data-channel*="dossier"]) & {    
        background-color: var(--theme-color-lighter);
      }
    }
  
    [data-color-scheme*="dark"][data-theme="today"]:not([data-channel*="dossier"]) & {
      background-color: var(--theme-color-lighter);
    }
    @supports (animation-timeline: scroll()) {
      animation: progress-driven auto linear;
      animation-timeline: view();
    }
  }
  

  body[data-model*="sponsor"] & {
    display: none;
  }
}