//////////////////////////////////
// THEME / COMPONENTS / FIGCAPTION-TOGGLE
//////////////////////////////////

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

// Figcaption
.unl .dcf-figcaption-toggle {
  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-caption $padding-right-caption $padding-bottom-caption $padding-left-caption;
  transition: opacity $figcaption-toggle-animation-duration ease-in-out;
}

// Toggle Button
.unl .dcf-btn-toggle-figcaption {
  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-toggle-figcaption .unl-btn-toggle-figcaption-icon-open{
  transition: opacity $figcaption-toggle-icon-animation-duration ease-in-out;
}
.unl .dcf-btn-toggle-figcaption[aria-expanded="false"] .unl-btn-toggle-figcaption-icon-open {
  opacity: 1;
}
.unl .dcf-btn-toggle-figcaption[aria-expanded="true"] .unl-btn-toggle-figcaption-icon-open {
  opacity: 0;
}


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