@use '@style/theme/index.scss' as theme;
@use 'sass:string';
@use './token.scss' as *;

$file-previewer-prefix-cls: string.unquote('#{theme.$prefix}-file-previewer');
$image-prefix-cls: string.unquote('#{theme.$prefix}-image');

@mixin center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.#{$file-previewer-prefix-cls} {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: $file-previewer-size-inline-min-height;

  &-fullscreen {
    inset: 0;
    min-height: 0;
  }

  &-inline {
    overflow: hidden;
    color: $file-previewer-color-content-text;
  }

  &-mask {
    position: absolute;
    inset: 0;
    background-color: $file-previewer-color-mask-bg;
  }

  &-content {
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  &-content-fullscreen {
    position: absolute;
    inset: $file-previewer-spacing-viewport-padding;
  }

  &-content-inline {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: $file-previewer-size-inline-min-height;
  }

  &-fullscreen &-content-audio {
    inset: 50% auto auto 50%;
    width: min(
      $file-previewer-size-audio-width,
      calc(100% - #{$file-previewer-spacing-viewport-padding} * 2)
    );
    max-height: $file-previewer-size-media-height;
    background: $file-previewer-color-content-bg;
    border-radius: $file-previewer-radius-panel;
    transform: translate(-50%, -50%);
  }

  &-header {
    box-sizing: border-box;
    padding: $file-previewer-spacing-header-padding-vertical
      $file-previewer-spacing-header-padding-horizontal;
    color: $file-previewer-color-content-text;
    font-size: $file-previewer-font-size-title;
  }

  &-title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &-body {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
  }

  &-image,
  &-video-player,
  &-audio-player,
  &-video {
    display: block;
    width: 100%;
    height: 100%;
  }

  &-image .#{$image-prefix-cls}-img {
    object-fit: contain;
  }

  &-video-player,
  &-audio-player {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  &-video-player {
    max-width: $file-previewer-size-media-width;
    max-height: $file-previewer-size-media-height;
  }

  &-media-skin {
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    height: 100%;
    min-height: 0 !important;
    max-height: 100%;

    --media-object-fit: cover;
  }

  &-video {
    object-fit: cover;
  }

  &-inline &-video-player {
    max-width: 100%;
    max-height: none;
  }

  &-audio-panel {
    box-sizing: border-box;
    width: 100%;
    padding: $file-previewer-spacing-panel-padding;
  }

  &-audio-player,
  &-audio {
    display: block;
    width: 100%;
  }

  &-pdf {
    display: flex;
    flex-direction: column;
    gap: $file-previewer-spacing-pdf-gap;
    width: 100%;
    height: 100%;
  }

  &-pdf-canvas-wrap {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    background: $file-previewer-color-pdf-canvas-bg;
    border-radius: $file-previewer-radius-pdf-canvas;
  }

  &-pdf-canvas {
    display: block;
  }

  &-pdf-toolbar {
    display: flex;
    flex-shrink: 0;
    gap: $file-previewer-spacing-pdf-toolbar-gap;
    align-items: center;
    justify-content: center;
    padding: $file-previewer-spacing-pdf-toolbar-padding;
    color: $file-previewer-color-pdf-toolbar-text;
    background: $file-previewer-color-pdf-toolbar-bg;
    border-radius: $file-previewer-radius-pdf-canvas;
  }

  &-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: $file-previewer-size-pdf-btn-min-width;
    height: $file-previewer-size-pdf-btn;
    padding: 0 $file-previewer-spacing-pdf-toolbar-gap;
    color: inherit;
    font-size: $file-previewer-font-size-pdf-btn;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: $file-previewer-radius-pdf-btn;
    cursor: pointer;

    &:disabled {
      color: $file-previewer-color-pdf-btn-disabled;
      cursor: not-allowed;
    }
  }

  &-pdf-page {
    min-width: 64px;
    font-size: $file-previewer-font-size-pdf-page;
    text-align: center;
  }

  &-close-btn {
    position: absolute;
    top: $file-previewer-position-close-top;
    right: $file-previewer-position-close-right;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: $file-previewer-size-close;
    height: $file-previewer-size-close;
    color: $file-previewer-color-close-text;
    font-size: $file-previewer-size-close-icon;
    background: $file-previewer-color-close-bg;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  &-loading {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: $file-previewer-size-loading;
    height: $file-previewer-size-loading;
    color: $file-previewer-color-loading-text;
    background-color: $file-previewer-color-loading-bg;
    border-radius: $file-previewer-radius-panel;

    @include center();
  }

  &-error {
    z-index: 2;
    color: $file-previewer-color-error-text;

    @include center();
  }

  &-inline &-error {
    color: $file-previewer-color-inline-error-text;
  }
}