@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$viewer: () !default;
$viewer: map.merge(
  (
    b-color: transparent,
    border: value('border-shape') value('viewer-b-color'),
    radius: value('radius-base'),
    v-padding: 0,
    h-padding: 0,
    toolbar-bg-color: value('bg-color-reverse'),
    toolbar-radius: value('radius-base'),
    toolbar-v-padding: 8px,
    toolbar-h-padding: 8px,
    action-size: 24px,
    action-color: value('bg-color-base'),
    action-color-hover: value('color-primary-base')
  ),
  $viewer
);

.#{$namespace}-viewer {
  &-vars {
    @include define-preset-values('viewer', $viewer);
  }

  @include basis {
    position: relative;
    width: 100%;
    height: 100%;
    padding: value('viewer-v-padding') value('viewer-h-padding');
    border: value('viewer-border');
    border-radius: value('viewer-radius');
  }

  &__container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
  }

  &__content,
  &__transition {
    display: flex;
    pointer-events: none;
    user-select: none;
    transition: value('transition-transform');
  }

  &--moving &__content {
    transition-duration: 0ms;
  }

  &--static &__content,
  &--static &__transition {
    transition-duration: 0ms;
  }

  $v-padding: value('viewer-toolbar-v-padding');
  $h-padding: value('viewer-toolbar-h-padding');

  &__toolbar {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background-color: value('viewer-toolbar-bg-color');
    border-radius: value('viewer-toolbar-radius');
    opacity: 0%;
    transition: value('transition-opacity');

    &--active {
      opacity: 100%;
    }

    &--vertical {
      flex-direction: column;
      padding: 10px;
    }

    &--top,
    &--top-start,
    &--top-end {
      top: $v-padding;
    }

    &--bottom,
    &--bottom-start,
    &--bottom-end {
      bottom: $v-padding;
    }

    &--top,
    &--bottom {
      left: 50%;
      transform: translateX(-50%);
    }

    &--top-start,
    &--bottom-start {
      inset-inline-start: $h-padding;
    }

    &--top-end,
    &--bottom-end {
      inset-inline-end: $h-padding;
    }

    &--right,
    &--right-start,
    &--right-end {
      right: $h-padding;
    }

    &--left,
    &--left-start,
    &--left-end {
      left: $h-padding;
    }

    &--right,
    &--left {
      top: 50%;
      transform: translateY(-50%);
    }

    &--right-start,
    &--left-start {
      top: $v-padding;
    }

    &--right-end,
    &--left-end {
      bottom: $v-padding;
    }

    .#{$namespace}-divider {
      border-color: value('viewer-action-color');
      opacity: 70%;

      &--horizontal {
        width: 1em;
        margin: 8px 0;
      }

      &:last-child {
        display: none;
      }
    }
  }

  &__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: value('viewer-action-size');
    height: value('viewer-action-size');
    padding: 0;
    color: value('viewer-action-color');
    cursor: pointer;
    background-color: transparent;
    border: 0;
    outline: 0;
    transition: value('transition-color');

    &:hover,
    &:focus {
      color: value('viewer-action-color-hover');
    }
  }
}