@import "./vars.pcss";
@import "@fancyapps/ui/dist/fancybox/fancybox.css";

@keyframes showModal {
  0% {
    opacity: 0;
    transform: scale(0) translateZ(0);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }
}


@keyframes hideModal {
  0% {
    opacity: 1;
    transform: scale(1) translateZ(0);
  }

  100% {
    opacity: 0;
    transform: scale(.5) translateZ(0);
  }
}

.modal {
  &__inner {
    display: flex;
    flex-flow: column;
    background: var(--modalBg);
    border-radius: var(--modalBorderRadius);
    color: var(--modalColor);
    padding: var(--modalPadding);
    width: var(--modalWidth);
    min-width: var(--modalMinWidth);
    max-width: var(--modalMaxWidth);
    height: var(--modalHeight);
    min-height: var(--modalMinHeight);
    max-height: var(--modalMaxHeight);
    position: var(--modalPosition);
    transform-origin: var(--modalTransformOrigin);
    cursor: var(--modalCursor);
    overflow: var(--modalOverflowX) var(--modalOverflowY);
    box-shadow: var(--modalBoxShadow);

    /* fix for fancybox bullshit styles */
    :empty {
      display: unset;
    }

    /* stylelint-disable */

    .is-draggable & {
      --modalCursor: grab;
    }

    .is-dragging & {
      --modalCursor: grabbing;
    }

    /* stylelint-enable */
  }

  &__body {
    padding: var(--modalBodyPadding);
  }

  &__header {
    background: var(--modalHeaderBg);
    border-radius: var(--modalHeaderBorderRadius);
    padding: var(--modalHeaderPadding);
    @mixin mb var(--modalHeaderMb);
  }

  &__title {
    padding: var(--modalTitlePadding);
    text-align: var(--modalTitleTextAlign);
    color: var(--modalTitleColor);
    letter-spacing: var(--modalTitleLetterSpacing);
    line-height: var(--modalTitleLineHeight);
    font-size: var(--modalTitleFontSize);
    font-weight: var(--modalTitleFontWeight);
  }

  &__content {
    background: var(--modalContentBg);
    color: var(--modalContentColor);
    padding: var(--modalContentPadding);
    text-align: var(--modalContentTextAlign);
    line-height: var(--modalContentLineHeight);
    font-size: var(--modalContentFontSize);
    font-weight: var(--modalContentFontWeight);
  }

  &__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    @mixin resetList;
  }

  &__ctrl {
    border-radius: var(--modalCtrlBorderRadius);
    background: var(--modalCtrlBg);
    padding: var(--modalCtrlPadding);
    inset: var(--modalCtrlTop) var(--modalCtrlRight) var(--modalCtrlBottom) var(--modalCtrlLeft);
    position: var(--modalCtrlPosition);
    z-index: var(--modalCtrlZIndex);
    width: var(--modalCtrlWidth);
    display: var(--modalCtrlDisplay);
    align-items: var(--modalCtrlAlignItems);
    justify-content: var(--modalCtrlJusticyContent);

    /* stylelint-disable */
    .btn.btn--isOnlyIcon {
      /* stylelint-enable */
      --btnHorPaddings: 0;
      --btnBg: var(--modalCtrlBtnBg);
      --btnTextColor: var(--modalCtrlBtnTextColor);
      --btnBorderRadius: var(--modalCtrlBtnBorderRadius);
      --btnPadding: var(--modalCtrlBtnPadding);
      --btnDisplay: var(--modalCtrlBtnDisplay);
      --btnBorderWidth: var(--modalCtrlBtnBorderWidth);
      --btnBorderColor: var(--modalCtrlBtnBorderColor);
      --btnHoverBg: var(--modalCtrlBtnHoverBg);
      --btnHoverBorderColor: var(--modalCtrlBtnHoverBorderColor);
      --btnHoverTextColor: var(--modalCtrlBtnHoverTextColor);
      --btnActiveBg: var(--modalCtrlBtnActiveBg);
      --btnActiveBorderColor: var(--modalCtrlBtnActiveBorderColor);
      --btnActiveTextColor: var(--modalCtrlBtnActiveTextColor);
      --btnWidth: var(--modalCtrlBtnWidth);
      --btnHeight: var(--modalCtrlBthHeight);
    }
  }

  &__footer {
    background: var(--modalFooterBg);
    color: var(--modalFooterColor);
    padding: var(--modalFooterPadding);
    border-radius: var(--modalFooterBorderRadius);
    display: var(--modalFooterDisplay);
    flex-flow: var(--modalFooterFlow);
    align-items: var(--modalFooterAlignItems);
    justify-content: var(--modalFooterJustifyContent);
    gap: var(--modalFooterGap);
  }

  /* stylelint-disable */

  &.fancybox__container {
    --f-html-padding: 0;
    --f-html-bg: transparent;
    --f-html-color: currentColor;
    --f-html-margin: 0;
    --f-error-bg: transparent;

    --fancybox-backdrop-bg: var(--modalOverlayFade);
    --fancybox-content-bg: transparent;
    --fancybox-content-color: currentColor;
    --fancybox-slide-gap: var(--modalOverlayGap);
    --fancybox-opacity: 1;
    --modalOverlayElementOpacity: 0;

    &:not(.is-opening, .is-closing) {
      --modalOverlayElementOpacity: 1;
    }

    .isModalShow {
      animation: var(--modalAnimationNameShow) var(--modalAnimationDuration);
    }

    .isModalHide {
      animation: var(--modalAnimationNameHide) var(--modalAnimationDuration);
    }

    cursor: var(--modalOverlayCursor);
    color: var(--modalOverlayColor);

    div.f-carousel__counter {
      display: none;
    }

    div.f-carousel__toolbar {
      @mixin transition var(--modalOverlayTransition);
      padding: var(--modalToolbarPadding);
      background: var(--modalToolbarBg);
      margin: var(--modalToolbarMargin);
      pointer-events: auto !important;
      opacity: var(--modalOverlayElementOpacity);

      .btn {
        --btnHorPaddings: 0;
        --btnBg: var(--modalToolbarBtnBg);
        --btnTextColor: var(--modalToolbarBtnTextColor);
        --btnBorderWidth: var(--modalToolbarBtnBorderWidth);
        --btnBorderColor: var(--modalToolbarBtnBorderColor);
        --btnBorderRadius: var(--modalToolbarBtnBorderRadius);
        --btnPadding: var(--modalToolbarBtnPadding);
        --btnDisplay: var(--modalToolbarBtnDisplay);
        --btnWidth: var(--modalToolbarBtnWidth);
        --btnHeight: var(--modalToolbarBthHeight);
        --btnCursor: var(--modalToolbarBtnCursor);

        --btnHoverBg: var(--modalToolbarBtnHoverBg);
        --btnHoverBorderColor: var(--modalToolbarBtnHoverBorderColor);
        --btnHoverTextColor: var(--modalToolbarBtnHoverTextColor);

        --btnActiveBg: var(--modalToolbarBtnActiveBg);
        --btnActiveBorderColor: var(--modalToolbarBtnActiveBorderColor);
        --btnActiveTextColor: var(--modalToolbarBtnActiveTextColor);

        --btnDisabledCursor: var(--modalToolbarBtnDisabledCursor);
        --btnDisabledBg: var(--modalToolbarBtnDisabledBg);
        --btnDisabledTextColor: var(--modalToolbarBtnDisabledTextColor);

        &[aria-disabled],
        &[disabled] {
          --btnOpacity: .5;
          --btnCursor: not-allowed;
        }
      }

      &__column {
        gap: var(--modalToolbarGap);
      }

    }

    div.fancybox__content {
      cursor: unset;
      padding: 0;


      &.fancybox-error {
        color: var(--modalColor);
      }
    }

    div.fancybox__slide {
      @mixin customScrollbar;
      padding: var(--modalOverlayPadding);

      &::before {
        margin: var(--modalOverlayMarginTop);
      }

      &::after {
        margin: var(--modalOverlayMarginBtm);
      }

      &.has-iframe > .f-html,
      &.has-pdf > .f-html {
        width: 100%;
        background: var(--deUIColorWhite);
        min-width: unset;
        max-width: 90vw;
        height: auto;
        min-height: 75vh;
        max-height: unset;
      }

    }

    div.fancybox__footer {
      @mixin transition var(--modalOverlayTransition);
      background: var(--modalOverlayFooterBg);
      padding: var(--modalOverlayFooterPadding);
      opacity: var(--modalOverlayElementOpacity);

      &:empty {
        display: none;
      }
    }

    div.f-caption {
      @mixin transition var(--modalOverlayTransition);
      @mixin lineClamp var(--modalOverlayCaptionMaxLines);
      padding: var(--modalOverlayCaptionPadding);
      font-size: var(--modalOverlayCaptionFontSize);
      font-weight: var(--modalOverlayCaptionFontWeight);
      line-height: var(--modalOverlayCaptionLineHeight);
      color: var(--modalOverlayCaptionColor);
      text-align: var(--modalOverlayCaptionTextAlign);
      user-select: var(--modalOverlayCaptionUserSelect);
      width: 100%;
    };

    div.fancybox__carousel {

      &:not(.has-arrows) {
        > .btn {
          @mixin hide;
        }
      }

      > .btn {
        --btnTransition: color .2s;
        --btnHorPaddings: 0;
        --btnBg: var(--modalCtrlBtnBg);
        --btnTextColor: var(--modalCtrlBtnTextColor);
        --btnBorderRadius: var(--modalCtrlBtnBorderRadius);
        --btnPadding: var(--modalCtrlBtnPadding);
        --btnDisplay: var(--modalCtrlBtnDisplay);
        --btnBorderWidth: var(--modalCtrlBtnBorderWidth);
        --btnBorderColor: var(--modalCtrlBtnBorderColor);
        --btnHoverBg: var(--modalCtrlBtnHoverBg);
        --btnHoverBorderColor: var(--modalCtrlBtnHoverBorderColor);
        --btnHoverTextColor: var(--modalCtrlBtnHoverTextColor);
        --btnActiveBg: var(--modalCtrlBtnActiveBg);
        --btnActiveBorderColor: var(--modalCtrlBtnActiveBorderColor);
        --btnActiveTextColor: var(--modalCtrlBtnActiveTextColor);
        --btnWidth: var(--modalCtrlBtnWidth);
        --btnHeight: var(--modalCtrlBthHeight);

        &.f-button {
          transition: none;
          --f-button-bg: transparent;
          --f-button-width: unset;
          --f-button-height: unset;
          --f-button-color: currentColor;
          --f-arrow-border-radius: 0;
          --f-button-shadow: none;
        }

        &.is-prev {
          left: calc(var(--modalCtrlGap) * 2);
          right: auto;
        }

        &.is-next {
          right: calc(var(--modalCtrlGap) * 2);
          left: auto;
        }

        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
      }
    }

    iframe.fancybox__iframe {
      background: var(--modalOverlayFade);
    }

    video.fancybox__html5video {
      background: var(--modalOverlayFade);
      object-fit: cover;
      object-position: 50% 50%;
      user-select: none;
    }

  }

  /* stylelint-enable */
}

/* stylelint-disable */
.with-fancybox dialog {
  &::backdrop {
    background: transparent;
  }
}
/* stylelint-enable */