@import '@financial-times/o3-foundation/css/core.css';
@import '@financial-times/o-grid/main';

$dataComponentVisibleElements: (
  'clip-set',
  'recommended',
  'flourish',
  'image-set',
  'video',
  'youtube-video',
  'table'
);

@mixin AlwaysVisibleElements {
  @each $component-name in $dataComponentVisibleElements {
    $component: '[data-component="#{$component-name}"]';
    // show the first paragraph and always visible component
    & > p:first-of-type ~ #{$component} {
      display: block;
    }
    // hide the expand button if it immediately follows the first of
    // paragraph and an always visible component
    > p:first-of-type
    + #{$component}
    + .cp-expander__expand {
      display: none;
    }
    // hide the expand button if it immediately follows the first of
    // any type of html element - which wil be paragrpah, 
    // or div for the always visible components
    > :first-of-type
    + .cp-expander__expand {
      display: none;
    }
  }
}
@mixin OrderElements {
  & > * {
    order:1
  }
  & > p:first-of-type ~ * {
    order:3
  }
  & > p:first-of-type ~ .cp-expander__expand {
    order:2
  }
}
@mixin expandeAndCollapse {
  &[data-state='expanded'] {
    .cp-expander-content {
      // Show all the hidden children...
      & > *:not(.cp-expander__expand) {
        display: block;
      }
      & > .cp-expander__expand {
        display: none;
        }
    }
   

  }

  &[data-state='collapsed'] {
    .cp-expander-content {
      // Hide everything that comes after the expander...
      // ... except the always visible children
      > p:first-of-type ~ * {
        display: none;
      }
      //when target truncated post show everything
      &:target > p:first-of-type {
        ~ * {
          display: block;

        }  

        ~ .cp-expander__expand {
          display: none;
        }
      }

      //show expand only when there is a p element, in this case we supose all other elements are exclusions that will be shown always
      > p:first-of-type ~ .cp-expander__expand {
        display: block;
      }

      > p:first-of-type + .cp-expander__expand {
        display: none;
      }

      > .cp-expander__collapse {
        display: none;
      }

     
      @include AlwaysVisibleElements;
      
      @include OrderElements;

    }
   
  }
}

@mixin InnerStyles {

      &.cp-expander--not-initialised {

        .cp-expander__expand,
        .cp-expander__collapse {
          display: none;
        }

          .cp-expander-content {
            // Target is used for the Core experience.
            // It permits us to hide elements server-side via CSS preventing Cumulative Shift but it is also a fully functional solution without Javascript
            &:target{
              .cp-expander__collapse{
                display: block;
              }
              .cp-expander__expand{
                display: none;
              }
            }
          }
      }
      .cp-expander__expand,
        .cp-expander__collapse {
          display: block;
          padding-bottom: var(--o3-spacing-s);
          > a {
            color: var(--o3-color-palette-ft-grey);
            font-feature-settings: 'clig' off, 'liga' off;
            
            font-family: var(--o3-font-family-metric);
            font-size: var(--o3-font-size-metric2-1);
            line-height: var(--o3-font-lineheight-metric2-1);
            font-weight: var(--o3-font-weight-regular);

            text-decoration: none;

            &:hover {
              
              cursor: pointer;
            }
      
            &:after {
              content: '';
              display: inline-block;
              width: 18px;
              height: 18px;
              background-color: var(--o3-color-palette-ft-grey);
              mask-image: var(--o3-icon-chevron-down);
              mask-repeat: no-repeat;
              mask-size: contain;

              margin: 0 6px;
              vertical-align: middle;
            }
          }
        }
    
        .cp-expander__collapse a:after {
          transform: rotate(180deg);
        }

      .cp-expander-content {
        display: flex;
        flex-direction: column;
      }

      @include expandeAndCollapse;
    

}

.cp-expander{
  &.cp-expander--mobile-only {
    .cp-expander__expand,
    .cp-expander__collapse {
      display: none;
    }
    @include oGridRespondTo($until: S) {
        @include InnerStyles;
    }
  }

  &.cp-expander--all-resolutions {
    @include InnerStyles;
  }
}