//////////////////////////////////
// THEME / COMPONENTS / SLIDESHOWS
//////////////////////////////////


@import '../../scss/pre.tmp.scss';


.unl .dcf-slide-deck {
  scrollbar-width: none;  // Hide scrollbar in Firefox
}


.unl .dcf-slide-deck::-webkit-scrollbar {
  display: none;  // Hide scrollbar in Safari and Chrome
}


.unl .dcf-slideshow:not([data-toggle-caption="false"]) .dcf-slide-deck {
  clip-path: polygon(
    100% 0,
    100% calc(100% - #{$size-btn-y} - (#{$border-width-button} * 2) - #{$size-clip-path}),
    calc(100% - (#{$size-btn-x} * 2) - (#{$border-width-button} * 5) - #{$size-clip-path}) calc(100% - #{$size-btn-y} - (#{$border-width-button} * 2) - #{$size-clip-path}),
    calc(100% - (#{$size-btn-x} * 2) - (#{$border-width-button} * 5) - #{$size-clip-path}) 100%,
    0 100%,
    0 0
  );
}


.unl .dcf-slideshow[data-toggle-caption="false"] .dcf-slide-deck {
  clip-path: polygon(
    0 0,
    calc(100% - (#{$size-btn-x} * 2) - (#{$border-width-button} * 5) - #{$size-clip-path}) 0,
    calc(100% - (#{$size-btn-x} * 2) - (#{$border-width-button} * 5) - #{$size-clip-path}) calc(#{$size-btn-y} + (#{$border-width-button} * 2) + #{$size-clip-path}),
    100% calc(#{$size-btn-y} + (#{$border-width-button} * 2) + #{$size-clip-path}),
    100% 100%,
    0 100%
  );
}



.unl .dcf-slideshow:not([data-toggle-caption="false"]) .dcf-slide-caption {
  background-color: $bg-color-overlay-dark;
  clip-path: polygon(
      100% 0,
      100% 100%,
      calc((#{$size-clip-path} * 2) + (#{$border-width-button} * 2) + #{$size-btn-x}) 100%,
      calc((#{$size-clip-path} * 2) + (#{$border-width-button} * 2) + #{$size-btn-x}) calc(100% - (#{$size-clip-path} * 2) - (#{$border-width-button} * 2) - #{$size-btn-y}),
      0 calc(100% - (#{$size-clip-path} * 2) - (#{$border-width-button} * 2) - #{$size-btn-y}),
      0 0
  );
  color: $cream;
  padding: $padding-top-slide-caption $padding-right-slide-caption $padding-bottom-slide-caption $padding-left-slide-caption;
  transition: opacity $caption-toggle-animation-duration ease-in-out;
}

.unl .dcf-btn-slide-caption {
  background-color: $bg-color-overlay-dark;
  border-color: transparent;
  bottom: #{$size-clip-path};
  color: $color-button-inverse-tertiary;
  left: #{$size-clip-path};
}

// Toggle Button Icon Open
.unl .dcf-btn-slide-caption .unl-icon-slide-caption-open{
  transition: opacity $caption-toggle-icon-animation-duration ease-in-out;
}
.unl .dcf-btn-slide-caption[aria-expanded="false"] .unl-icon-slide-caption-open {
  opacity: 1;
}
.unl .dcf-btn-slide-caption[aria-expanded="true"] .unl-icon-slide-caption-open {
  opacity: 0;
}


// Toggle Button Icon Close
.unl .dcf-btn-slide-caption .unl-icon-slide-caption-close-1,
.unl .dcf-btn-slide-caption .unl-icon-slide-caption-close-2 {
  transform-origin: 50% 50%;
  transition: transform $caption-toggle-icon-animation-duration ease-in-out;
}
.unl .dcf-btn-slide-caption[aria-expanded="false"] .unl-icon-slide-caption-close-1,
.unl .dcf-btn-slide-caption[aria-expanded="false"] .unl-icon-slide-caption-close-2 {
  transform: rotate(0deg);
}
.unl .dcf-btn-slide-caption[aria-expanded="true"] .unl-icon-slide-caption-close-1 {
  transform: rotate(45deg);
}
.unl .dcf-btn-slide-caption[aria-expanded="true"] .unl-icon-slide-caption-close-2 {
  transform: rotate(-45deg);
}