// Generic TinySlider Slider for Purdue
// Using the .alignwide style with overflow so items span the entire width of the browser window
//
// Options:
// $slider-width: $rkv-max-width-entry-content -- Width of the carousel. Default is to the be like .alignwide.
// $slider-nav-bar-width: 1110px, -- Width of the nav-bar area. This overruns the width of the carousel to reflect the design
// $slider-item-gap: 25px; -- Space between slider items
// $slider-item-display: inline-flex -- Overrides TinySlider's default of inline-block
// $slider-overflow : visible; -- Allows the carousel items to be visible outside of the content area and fill the width of the browser window.

@mixin purdue_carousel_tinyslider_default(
  $slider-width: $rkv-max-width-entry-content,
  $slider-nav-bar-width: 1002px,
  $slider-item-gap: 25px,
  $slider-item-display: inline-flex,
  $slider-overflow: visible
) {
  $slider-controls-width: 72px;
  $slider-controls-gap: 41px;

  .tns-outer {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: $slider-width;
    position: relative;
    margin-bottom: $rkv-gutter-quadruple;
    body.single-post & {
      margin-bottom: 0;
    }
    display: grid;
    // On our "regular" content width pages. The nav bar will overhang the content area, thus getting two grid columns.
    // The slides only take up the content area, so there are two "x" columns to the right that are unused.
    grid-template-areas:
      "slides x x"
      "nav nav controls";
    justify-content: space-between;
    grid-template-columns: $slider-width 1fr $slider-controls-width;
    grid-template-rows: 1fr 80px;
    body:not(.header-convergent) & {
      // When the width of the page is no longer wider than the content area, we will collapses all the columns into one
      // There are rules below which relocate the controls to the 'nav' columns.
      // @include mq($until: lg) {
      grid-template-areas:
        "slides"
        "nav";
      justify-content: space-between;
      grid-template-columns: 100%;
      grid-template-rows: 1fr;
      // }
    }
    // Header Convergent pages have an align wide content area and do not want the overhang of the scrollbar.
    // Both the nav and controls are under the 'nav' column.
    body.header-convergent &,
    div.alignfull & {
      grid-template-areas:
        "slides"
        "nav";
      justify-content: space-between;
      grid-template-columns: 100%;
      grid-template-rows: 1fr;
    }
    grid-column-gap: $slider-controls-gap;
    grid-row-gap: 0px;
    > .tns-ovh {
      overflow: $slider-overflow; // The carousel content will be visible outside of the $slider-width area
      grid-area: slides;
      width: $rkv-max-width-entry-content;
      .tns-inner > .tns-outer > .tns-nav {
        display: none;
      }
      .tns-inner {
        max-width: 100%;
        .tns-slider.tns-carousel {
          cursor: grab;
          .tns-item {
            &:not(a) {
              cursor: grab;
            }
            &a {
              pointer-events: all;
            }
            display: $slider-item-display; // Override TinySlider's default of inline-block.
            &.tns-slide-active {
            }
            &:last-child {
              // The last slide should not have space afterwards.
              padding-right: 0 !important;
              margin-right: 0 !important;
            }
          }
          &.tns-dragging {
            cursor: grabbing;
            .tns-item {
              cursor: grabbing;
            }
            a {
              pointer-events: none;
            }
          }
        }
      }
    }
    > .tns-nav {
      text-align: left;
      position: relative;
      grid-area: nav;
      place-self: center start;
      height: 80px;
      margin-top: $rkv-gutter;
      display: flex;
      align-items: center;
      justify-content: center;
      bottom: auto;
      width: calc(
        $slider-nav-bar-width - $slider-controls-gap - $slider-controls-width
      );
      body:not(.header-convergent) & {
        @include mq($until: md) {
          max-width: calc(100% - $slider-controls-gap - $slider-controls-width);
        }
        @include mq($from: md) {
          width: max(
            calc(100% - $slider-controls-gap - $slider-controls-width),
            calc(
              100vw - (100vw - 880px) - $slider-controls-gap -
                $slider-controls-width
            )
          );
          max-width: calc(100% - $slider-controls-gap - $slider-controls-width);
        }

        // @include mq($from: lg) {
        // 	width: 1002px;
        // 	max-width: 100%;
        // }
      }
      body.header-convergent &,
      div.alignfull & {
        width: max(100%, 1213.15px);
        max-width: min(
          1213.15px,
          calc(100% - $slider-controls-gap - $slider-controls-width)
        );
      }

      button {
        border: 0;
        padding: 0;
        margin: 0;
        background: transparent;
        border-radius: 0;
        width: auto;
        flex-grow: 1;
        border-top: 2px solid $-purdue-gray;
        height: 28px;
        display: block;
        &.tns-nav-active {
          margin-top: -3px;
          border-top: 5px solid $-purdue-black;
          body.dark-page &,
          .rkv-layout-wrapper[class*="black-background-color"] & {
            // On dark pages or a black background, change the color of the active button to be brighter.
            border-top: 5px solid #c4bfc0;
          }
          body.dark-page
            .rkv-layout-wrapper[class*="white-background-color"]
            & {
            // On a dark page, but on a white background.
            border-top: 5px solid $-purdue-black;
          }
        }
      }
    }
    > .tns-controls {
      grid-area: controls;
      body:not(.header-convergent) & {
        grid-area: nav;
        place-self: center end;
      }
      @include mq($until: lg) {
        grid-area: nav;
        place-self: center end;
      }
      body.header-convergent &,
      div.alignfull & {
        grid-area: nav;
        place-self: center end;
      }
      width: 72px;
      place-self: center;
      height: 51px;
      display: flex;
      justify-content: flex-end;
      justify-items: center;
      align-content: center;
      align-items: center;
      @supports (aspect-ratio: 1 / 1) {
        gap: 36px;
      }
      flex-basis: 72px;
      margin-bottom: 14px;
      > button {
        width: 18px;
        height: 35px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center center;
        border: none;
        overflow: hidden;
        text-indent: -9999px;
        opacity: 0.8;
        body.dark-page &,
        .rkv-layout-wrapper[class*="black-background-color"] & {
          // On a dark page, or on a black background.
          filter: invert(1);
        }
        body.dark-page .rkv-layout-wrapper[class*="white-background-color"] & {
          // If on a dark page, but with a white background.
          filter: invert(0);
        }

        &:hover,
        &:active {
          opacity: 1;
        }
        &[data-controls="prev"] {
          background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='angle-left' class='svg-inline--fa fa-angle-left fa-w-8' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath fill='currentColor' d='M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z'%3E%3C/path%3E%3C/svg%3E");
          margin-right: 18px;
        }
        &[data-controls="next"] {
          background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='angle-right' class='svg-inline--fa fa-angle-right fa-w-8' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath fill='currentColor' d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'%3E%3C/path%3E%3C/svg%3E");
          margin-left: 18px;
        }
        @supports (aspect-ratio: 1 / 1) {
          margin: 0;
          &:first-child,
          &:last-child {
            margin: 0;
          }
        }
      }
    }
  }
}

// When there is a background color set, there is an additional .rkv-layout-wrapper
.rkv-layout-wrapper {
  &[class*="-background-color"] {
    // If there is a background-color in the class
    padding-top: 29.5px; // We need additional padding
    @extend .alignfull; // Make the wrapper full width
    > * {
      max-width: $rkv-max-width-entry-content; // On posts, regular entry
      body.header-convergent & {
        // Those pages with header-convergent are wide width by default
        max-width: $rkv-max-width-wide-entry-content;
      }
      margin: 0 auto; // Center our slider.
    }
  }
}

/* Front End Style */
.purdue_carousel_default_wrapper {
  @include purdue_carousel_tinyslider_default(
    $slider-width: 100%,
    $slider-item-gap: 0,
    $slider-item-display: inline-table
  );
  &.rkv-bm-none {
    margin-bottom: none !important;
  }
  &.rkv-bm-half {
    margin-bottom: $rkv-gutter-half !important;
  }
  &.rkv-bm-double {
    margin-bottom: $rkv-gutter-double !important;
  }
  &.rkv-bm-triple {
    margin-bottom: $rkv-gutter-triple !important;
  }
  .purdue_carousel_default {
    &[data-size="medium"] {
      figure {
        img {
          width: 300px;
          height: auto;
        }
      }
    }
    &[data-size="rkv-two-to-one"] {
      figure {
        img {
          width: 666px;
          height: auto;
          aspect-ratio: 2/1;
          @include mq($until: md) {
            height: auto;
            width: 318px;
          }
        }
      }
    }
    &[data-size="rkv-four-to-five"] {
      figure {
        img {
          width: 432px;
          height: 539px;
          aspect-ratio: 4/5;
          @include mq($until: md) {
            width: 317px;
            height: 396px;
          }
        }
      }
    }
    &[data-size="rkv-square-variation-5-slider"] {
      figure {
        img {
          width: 318px;
          height: 318px;
          aspect-ratio: 318/318;
          max-width: initial;
          max-height: 50vh;
        }
      }
    }
    figure {
      margin-bottom: 0;
      img {
        width: 666px;
        height: auto;
        @include mq($until: md) {
          width: 318px;
        }
      }
      figcaption {
        display: block;
      }
    }
  }
}

/* Editor Style */
.purdue_carousel_default[class].wp-block-gallery[class],
.purdue_carousel_default[class].rkv-block-gallery[class] {
  &.block-editor-block-list__block {
    .blocks-gallery-grid {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: scroll;
      align-items: flex-start;
      flex-direction: row;

      &::-webkit-scrollbar {
        height: 2px;
      }

      &::-webkit-scrollbar-track {
        background-color: $-purdue-black;
        border-radius: 0;
        opacity: 0.25;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 0;
        background-color: $-purdue-black;
        height: 5px;
      }

      > li {
        width: auto;
        min-width: 325px;
        flex: 0 0 auto;
        figure {
          width: auto;
          height: 100%;
          display: inline-table;
          img {
            width: auto;
            height: 444px;
            max-width: 100%;
            vertical-align: top;
          }
          figcaption {
          }
        }
      }
    }
  }
}
.rkv-related-content
  .rkv-default-archive-card-slider__wrapper[class]
  .tns-outer
  > .tns-controls
  > button {
  filter: invert(1);
}

.purdue_carousel_default_wrapper
  .tns-outer
  > .tns-ovh
  .tns-inner
  .tns-slider.tns-carousel.tns-dragging
  a {
  pointer-events: auto;
}
