<template>
  <main :class="['entry-page', { 'menu-is-open': menuIsOpen }]">
    <div class="button-close">
      <Button
        look="no-text"
        :icon="menuIsOpen ? 'bi bi-chevron-right' : 'bi bi-chevron-left'"
        @trigger="menuIsOpen = !menuIsOpen"
      />
    </div>
    <section class="entry-viewer">
      <Viewer
        :fetch-options="{ fetchOptions: { credentials: 'include' } }"
        ref="viewerRef"
      />
    </section>
    <div v-if="sequence && !isLoading" class="menu-right">
      <div class="menu-top" ref="collapseMenu">
        <div class="header-menu">
          <button
            data-bs-target="#collapseTarget"
            data-bs-toggle="collapse"
            class="button-collapse"
            @click="toggleMenu"
          >
            <div class="wrapper-title">
              <span :class="[sequence.status, 'sequence-status']">{{
                sequenceStatus
              }}</span>
              <h1 class="title desktop">
                {{ sequence.title }}
              </h1>
            </div>
            <i :class="headerPanelIsOpen ? 'bi bi-dash' : 'bi bi-plus'"></i>
          </button>
          <h1 class="title responsive">
            {{ sequence.title }}
          </h1>
        </div>
        <div v-if="isSequenceOwner" class="wrapper-button">
          <Button
            :tooltip="$t('pages.sequence.hide_sequence_tooltip')"
            :text="
              sequence.status === 'ready'
                ? $t('pages.sequence.button_disable')
                : $t('pages.sequence.button_enable')
            "
            look="button--white background-white"
            :icon="
              sequence.status === 'ready' ? 'bi bi-eye-slash' : 'bi bi-eye'
            "
            class="disable-button"
            @trigger="patchCollection"
          />
          <Button
            :tooltip="$t('pages.sequence.delete_sequence_tooltip')"
            :text="$t('pages.sequence.button_delete')"
            look="button--red background-white"
            icon="bi bi-trash"
            @trigger="deleteCollection"
          />
        </div>
        <div
          :class="[sequence.status, 'collapse py-2 show']"
          id="collapseTarget"
        >
          <div class="block-collapse">
            <div class="wrapper-info-top">
              <span v-if="sequence.created"
                >{{ $t('pages.sequence.created') }}
                {{
                  formatDate(new Date(sequence.created), 'Do MMMM YYYY')
                }}</span
              >
              <span v-if="sequence.duration"
                >{{ $t('pages.sequence.duration') }}
                {{ sequence.duration }}</span
              >
              <span v-if="sequence.taken"
                >{{ $t('pages.sequence.taken') }}
                {{ formatDate(sequence.taken, 'Do MMMM YYYY') }}</span
              >
            </div>
            <div class="wrapper-info-top">
              <span v-if="sequence.extent.temporal.interval[0][0]"
                >{{ $t('pages.sequence.duration_begin') }}
                {{
                  formatDate(
                    sequence.extent.temporal.interval[0][0],
                    'Do MMMM YYYY, HH:mm:ss'
                  )
                }}</span
              >
              <span v-if="sequence.extent.temporal.interval[0][1]"
                >{{ $t('pages.sequence.duration_end') }}
                {{
                  formatDate(
                    sequence.extent.temporal.interval[0][1],
                    'Do MMMM YYYY, HH:mm:ss'
                  )
                }}</span
              >
              <span v-if="sequence.camera"
                >{{ $t('pages.sequence.camera') }} {{ sequence.camera }} -
                {{ sequence.cameraModel }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div v-if="pictures && pictures.length" class="photos-wrapper">
        <div v-if="isSequenceOwner" class="delete-all" ref="deleteAll">
          <div class="wrapper-select">
            <InputCheckbox
              :is-checked="pictures.length === picturesToDelete.length"
              :is-indeterminate="isIndeterminate"
              :label="selectedText"
              @trigger="triggerCheck"
            />
            <div v-if="picturesToDelete.length" class="wrapper-photo-selected">
              <span class="photo-selected-separator">-</span>
              <span>{{
                $t('pages.sequence.picture_selected', picturesToDelete.length)
              }}</span>
            </div>
          </div>
          <div class="action-buttons">
            <Button
              look="button--white background-white"
              :icon="
                picturesToDeleteStatus === 'hidden' ||
                imagesSelectedHaveDifferentStatus
                  ? 'bi bi-eye'
                  : 'bi bi-eye-slash'
              "
              :tooltip="$t('pages.sequence.hide_photo_tooltip')"
              :disabled="
                !picturesToDelete.length || sequence.status === 'hidden'
              "
              @trigger="patchOrDeleteCollectionItems('PATCH')"
            />
            <div class="button-hidde">
              <Button
                look="button--red background-white"
                icon="bi bi-trash"
                :tooltip="$t('pages.sequence.delete_photo_tooltip')"
                :disabled="!picturesToDelete.length"
                @trigger="patchOrDeleteCollectionItems('DELETE')"
              />
            </div>
          </div>
        </div>
        <ul class="photo-list">
          <li
            v-for="(item, i) in pictures"
            :id="`el-list${i}`"
            class="photo-item"
          >
            <ImageItem
              :href="item.assets.thumb.href"
              :href-hd="item.assets.hd.href"
              :created="formatDate(item.properties.datetime, 'HH:mm:ss')"
              :selected="photoToDeleteOrPatchSelected(item, picturesToDelete)"
              :selected-on-map="itemSelected === item.id"
              :status="
                imageStatus(item.properties['geovisio:status'], sequence.status)
              "
              @trigger="selectImageAndMove(item)"
            />
          </li>
          <div class="entry-pagination">
            <Pagination
              v-for="item in paginationLinks"
              :type="item.rel"
              :href="item.href"
              :self-link="selfLink[0]"
              @trigger="goToNextPage"
            />
          </div>
        </ul>
      </div>
      <p v-else class="no-photo">{{ $t('pages.sequence.no_image') }}</p>
      <Toast :text="toastText" :look="toastLook" @trigger="toastText = ''" />
    </div>
    <div v-else class="menu-right wrapper-loader">
      <Loader look="sm" :is-loaded="false" />
    </div>
  </main>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useSequenceStore } from '@/store/sequence'
import { storeToRefs } from 'pinia'
import { useCookies } from 'vue3-cookies'
import Button from '@/components/Button.vue'
import Toast from '@/components/Toast.vue'
import Pagination from '@/components/Pagination.vue'
import InputCheckbox from '@/components/InputCheckbox.vue'
import Loader from '@/components/Loader.vue'
import ImageItem from '@/components/ImageItem.vue'
import Viewer from '@/components/Viewer.vue'
import { durationCalc, formatDate } from '@/utils/dates'
import {
  deleteACollectionItem,
  patchACollectionItem,
  fetchCollectionItems,
  fetchCollectionItemsWithFullUrl,
  fetchCollection,
  deleteACollection,
  patchACollection
} from '@/views/utils/sequence/request'

import {
  imageStatus,
  scrollIntoSelected,
  photoToDeleteOrPatchSelected,
  spliceIntoChunks,
  formatPaginationItems
} from '@/views/utils/sequence/index'
import type {
  ResponseUserPhotoInterface,
  ResponseUserPhotoLinksInterface,
  CheckboxInterface,
  UserSequenceInterface,
  ResponseUserSequenceInterface
} from './interfaces/MySequenceView'
const { cookies } = useCookies()
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const sequenceStore = useSequenceStore()
const { toastText, toastLook } = storeToRefs(sequenceStore)
let sequence = ref<UserSequenceInterface>()
let pictures = ref<ResponseUserPhotoInterface[] | []>([])
let picturesToDelete = ref<string[]>([])
let paginationLinks = ref<ResponseUserPhotoLinksInterface[] | []>([])
let selfLink = ref<ResponseUserPhotoLinksInterface[] | []>([])
let menuIsOpen = ref<boolean>(true)
let headerPanelIsOpen = ref<boolean>(true)
let isShiftPressed = ref<boolean>(false)
let itemSelected = ref<string>('')
let isLoading = ref<boolean>(false)
const collapseMenu = ref<HTMLDivElement>()
const deleteAll = ref<HTMLDivElement>()
const menuHeight = ref<string>()
const viewerRef = ref()

onMounted(async () => {
  try {
    const fetchAllCollectionInfo = await Promise.all([
      fetchCollection(route.params.id),
      fetchCollectionItems(route.params.id, '?limit=100')
    ])
    selfLink.value = fetchAllCollectionInfo[1].data.links.filter(
      (el) => el.rel === 'self'
    )
    paginationLinks.value = formatPaginationItems(
      fetchAllCollectionInfo[1].data.links
    )
    formatSequenceFetched(fetchAllCollectionInfo[0].data)
    const collectionItems = fetchAllCollectionInfo[1].data.features
    const collectionItemsReady = collectionItems.filter(
      (el) => el.properties['geovisio:status'] === 'ready'
    )
    pictures.value = collectionItems
    setHeightValue()
    if (itemSelected.value.length || !collectionItemsReady[0]) return
    viewerRef.value.viewer._api.onceReady().then(() => {
      viewerRef.value.viewer.goToPicture(
        collectionItemsReady[0].id,
        sequence.value?.id
      )
    })
    itemSelected.value = collectionItemsReady[0].id
    scrollIntoSelected(collectionItemsReady[0].id, pictures.value)
  } catch (err) {
    console.log(err)
  }
})

watchEffect(async () => {
  if (!viewerExist(viewerRef)) return
  viewerRef.value.viewer.addEventListener(
    'picture-loaded',
    async (e: { detail: { picId: string } }): Promise<void> => {
      if (itemSelected.value === e.detail.picId) return
      if (!pictureExistInList(e.detail.picId)) {
        await goToTheGoodPage(e.detail.picId)
      }
      itemSelected.value = e.detail.picId
      scrollIntoSelected(e.detail.picId, pictures.value)
    }
  )
})

function viewerExist(viewerRef: any): boolean {
  return !!(viewerRef && viewerRef.value && viewerRef.value.viewer)
}

const isSequenceOwner = computed((): boolean => {
  return !!(
    sequence.value &&
    sequence.value.providers &&
    sequence.value.providers[0] &&
    cookies.get('user_name') &&
    sequence.value.providers[0].name === cookies.get('user_name')
  )
})

const sequenceStatus = computed((): string => {
  if (sequence.value?.status === 'ready')
    return t('pages.sequence.sequence_published')
  if (sequence.value?.status === 'hidden')
    return t('pages.sequence.sequence_hidden')
  return t('pages.sequence.sequence_waiting')
})

const picturesToDeleteStatus = computed((): string => {
  if (fullImagesToDelete().length) {
    return fullImagesToDelete()[0].properties['geovisio:status']
  }
  return 'hidden'
})
const imagesSelectedHaveDifferentStatus = computed((): boolean => {
  function filterByStatus(status: string): ResponseUserPhotoInterface[] {
    return fullImagesToDelete().filter((el) => {
      return el.properties['geovisio:status'] === status
    })
  }
  return (
    filterByStatus('hidden').length > 0 && filterByStatus('ready').length > 0
  )
})

const isIndeterminate = computed(
  (): boolean =>
    !!picturesToDelete.value.length &&
    !!sequence.value &&
    pictures.value.length !== picturesToDelete.value.length
)

const selectedText = computed((): string =>
  picturesToDelete.value.length === pictures.value.length
    ? t('pages.sequence.unselect_text')
    : t('pages.sequence.select_text')
)

async function goToTheGoodPage(id: string): Promise<void> {
  const { data } = await fetchCollectionItems(
    route.params.id,
    `?withPicture=${id}&limit=100`
  )
  selfLink.value = data.links.filter((el) => el.rel === 'self')
  paginationLinks.value = formatPaginationItems(data.links)
  pictures.value = data.features
}

function pictureExistInList(picId: string): boolean {
  return !!pictures.value.find((el) => el.id === picId)
}

function setHeightValue() {
  setTimeout(() => {
    if (collapseMenu.value && deleteAll.value) {
      const height =
        collapseMenu.value?.clientHeight + deleteAll.value?.clientHeight + 130
      menuHeight.value = `${height}px`
    }
  }, 500)
}

function toggleMenu() {
  headerPanelIsOpen.value = !headerPanelIsOpen.value
  setHeightValue()
}

function formatSequenceFetched(collectionInfo: ResponseUserSequenceInterface) {
  const times = ['hours', 'minutes', 'seconds']
  sequence.value = {
    ...collectionInfo,
    duration: formatDuration(collectionInfo.extent.temporal.interval[0], times),
    status: collectionInfo['geovisio:status']
  }
}
function formatDuration(temporal: Date[], times: string[]): string {
  let timer = ''
  times.map((el) => {
    const durationCalculated = durationCalc(temporal[1], temporal[0], el)
    if (durationCalculated > 0) {
      timer += ` ${t(`pages.sequence.${el}`, durationCalculated)}`
    }
  })
  return timer
}
function hiddeAllPictures(): void {
  pictures.value.map((el) => (el.properties['geovisio:status'] = 'false'))
}

async function deleteCollection(): Promise<void> {
  if (confirm(t('pages.sequence.confirm_sequence_dialog'))) {
    isLoading.value = true
    await deleteACollection(route.params.id)
    isLoading.value = false
    sequenceStore.addToastText(t('pages.sequences.sequence_deleted'), 'success')
    await router.push({ name: 'my-sequences' })
  }
}

async function patchCollection(): Promise<void> {
  isLoading.value = true
  let visible
  if (sequence.value?.status === 'ready') visible = 'false'
  else visible = 'true'
  await patchACollection(route.params.id, visible)
  const fetchCollectionInfo = await fetchCollection(route.params.id)
  formatSequenceFetched(fetchCollectionInfo.data)
  if (visible === 'false') hiddeAllPictures()
  else {
    const { data } = await fetchCollectionItems(route.params.id, '?limit=100')
    pictures.value = data.features
  }
  viewerRef.value.viewer.reloadVectorTiles()
  isLoading.value = false
}

function fullImagesToDelete(): ResponseUserPhotoInterface[] {
  return pictures.value.filter((el) => picturesToDelete.value.includes(el.id))
}

async function goToNextPage(value: string): Promise<void> {
  isLoading.value = true
  const { data } = await fetchCollectionItemsWithFullUrl(value)
  selfLink.value = data.links.filter((el) => el.rel === 'self')
  paginationLinks.value = formatPaginationItems(data.links)
  pictures.value = data.features
  scrollIntoSelected(pictures.value[0].id, pictures.value)
  picturesToDelete.value = []
  isLoading.value = false
  setHeightValue()
}

function triggerCheck(value: CheckboxInterface): void {
  value.isChecked
    ? (picturesToDelete.value = pictures.value
        .filter(
          (el) => el.properties['geovisio:status'] !== 'waiting-for-process'
        )
        .map((el) => el.id))
    : (picturesToDelete.value = [])
}
function selectPhotoToDeleteOrPatch(
  item: ResponseUserPhotoInterface
): string[] {
  document.addEventListener('keydown', function (evt) {
    if (evt.key === 'Shift') {
      isShiftPressed.value = true
    }
  })
  document.addEventListener('keyup', function (evt) {
    if (evt.key === 'Shift') {
      isShiftPressed.value = false
    }
  })
  if (isShiftPressed.value) {
    const picturesIndex = pictures.value.findIndex((el) => el.id === item.id)
    const picturesLastIndex = pictures.value.findIndex(
      (el) => el.id === picturesToDelete.value[0]
    )
    const slicedUserPhotos = pictures.value.slice(
      picturesLastIndex,
      picturesIndex + 1
    )
    return (picturesToDelete.value = slicedUserPhotos.map((el) => el.id))
  }
  if (picturesToDelete.value.includes(item.id)) {
    return (picturesToDelete.value = picturesToDelete.value.filter(
      (el) => el !== item.id
    ))
  }
  return (picturesToDelete.value = [...picturesToDelete.value, item.id])
}
async function selectImageAndMove(
  item: ResponseUserPhotoInterface
): Promise<void> {
  selectPhotoToDeleteOrPatch(item)
  if (
    picturesToDelete.value.length < 2 &&
    item.properties['geovisio:status'] === 'ready'
  ) {
    const viewerMap = await viewerRef.value.viewer
    viewerMap.goToPicture(item.id, sequence.value?.id)
    itemSelected.value = item.id
    await goToTheGoodPage(item.id)
    scrollIntoSelected(item.id, pictures.value)
  }
}

async function patchOrDeleteCollectionItems(
  requestType: string
): Promise<void> {
  if (
    requestType === 'DELETE' &&
    !confirm(t('pages.sequence.confirm_pictures_dialog'))
  )
    return
  isLoading.value = true
  toastText.value = ''
  const chunksItems = spliceIntoChunks(picturesToDelete.value, 4)
  try {
    let items: unknown[] = []
    if (imagesSelectedHaveDifferentStatus.value) {
      for (let el of chunksItems) {
        items = [
          ...items,
          ...(await Promise.all(
            el.map(async (ele) => {
              if (requestType === 'PATCH') {
                return await patchACollectionItem('true', route.params.id, ele)
              }
              return await deleteACollectionItem(route.params.id, ele)
            })
          ))
        ]
      }
    } else {
      for (let el of chunksItems) {
        items = [
          ...items,
          ...(await Promise.all(
            el.map(async (ele) => {
              if (requestType === 'PATCH') {
                const imageToDelete = pictures.value.find(
                  (elem) => elem.id === ele
                )
                const isVisible =
                  imageToDelete?.properties['geovisio:status'] === 'ready'
                    ? 'false'
                    : 'true'
                return await patchACollectionItem(
                  isVisible,
                  route.params.id,
                  ele
                )
              }
              return await deleteACollectionItem(route.params.id, ele)
            })
          ))
        ]
      }
    }
    const { data } = await fetchCollectionItems(route.params.id, '?limit=100')
    pictures.value = data.features
    isLoading.value = false
    viewerRef.value.viewer.reloadVectorTiles()
    viewerRef.value.viewer.goToPicture(pictures.value[0].id, route.params.id)
    scrollIntoSelected(picturesToDelete.value[0], pictures.value)
    picturesToDelete.value = []
    sequenceStore.addToastText(t('general.success_text'), 'success')
  } catch (e) {
    sequenceStore.addToastText(t('general.error_text'), 'error')
    isLoading.value = false
    picturesToDelete.value = []
  }
}
</script>

<style lang="scss" scoped>
.responsive {
  display: none;
}
.entry-page {
  display: flex;
}
.entry-viewer {
  width: 50vw;
  position: relative;
  height: calc(100vh - #{toRem(8)});
}
.menu-right {
  width: 50vw;
  height: calc(100vh - #{toRem(8)});
  overflow: hidden;
}
.wrapper-loader {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper-title {
  display: flex;
  align-items: center;
}
.wrapper-button {
  display: flex;
  align-items: center;
}
.disable-button {
  margin-right: toRem(1);
}
.collapse {
  &:first-child {
    @include text(s-regular);
    color: var(--grey-dark);
    margin-bottom: toRem(1);
  }
  &.hidden {
    opacity: 0.4;
  }
}
.block-collapse {
  display: flex;
}
.wrapper-info-top {
  @include text(s-regular);
  color: var(--grey-dark);
}
.wrapper-info-top {
  display: flex;
  flex-direction: column;
  margin-top: toRem(1);
  &:first-child {
    border-right: toRem(0.1) solid var(--grey-dark);
    padding-right: toRem(2);
  }
  &:nth-child(2) {
    padding-left: toRem(2);
  }
}
.title {
  @include text(h4);
  color: var(--grey-dark);
  margin-right: toRem(1);
  margin-bottom: 0;
}
.button-close {
  display: none;
}
.menu-top {
  margin: toRem(2) toRem(2) 0;
  padding: toRem(1) toRem(2);
  border: toRem(0.1) solid var(--grey);
  border-radius: toRem(0.5);
  background-color: var(--blue-semi);
}
.header-menu {
  display: flex;
  justify-content: space-between;
}
.sequence-status {
  @include text(xs-r-regular);
  border-radius: toRem(3);
  padding: toRem(0.5) toRem(1);
  margin-right: toRem(1);
  color: var(--white);
  &.ready {
    background-color: var(--orange);
    border: toRem(0.1) solid var(--orange);
  }
  &.waiting-for-process {
    background-color: var(--yellow);
    border: toRem(0.1) solid var(--yellow);
  }
  &.hidden {
    background-color: var(--blue-geovisio);
    border: toRem(0.1) solid var(--blue-geovisio);
  }
}
.button-collapse {
  border: none;
  background-color: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: toRem(1);
}
.bi-plus,
.bi-dash {
  color: var(--grey-dark);
  font-size: toRem(3);
}

.photos-wrapper {
  padding: toRem(1) 0 toRem(2) toRem(1);
  height: calc(100vh - v-bind(menuHeight));
}
.delete-all {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: toRem(1);
  margin-right: toRem(2);
  margin-bottom: toRem(1);
  @include text(xs-r-regular);
}
.wrapper-select {
  display: flex;
  align-items: center;
}
.wrapper-photo-selected {
  @include text(xs-regular);
}
.photo-selected-separator {
  margin-right: toRem(0.5);
  margin-left: toRem(0.5);
}
.button-hidde {
  margin-right: toRem(1);
  margin-left: toRem(1);
}
.action-buttons {
  display: flex;
  align-items: center;
}
.photo-list {
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  height: 100%;
  width: 100%;
  padding: 0;
}
.photo-item {
  width: calc(33% - #{toRem(2)});
  height: fit-content;
  margin: toRem(1);
  border-radius: toRem(0.5);
  background-color: var(--grey);
}
.no-photo {
  @include text(s-regular);
  text-align: center;
  margin-top: toRem(10);
  color: var(--grey-dark);
}
.entry-pagination {
  margin-top: toRem(2);
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (max-width: toRem(102.4)) {
  .header-menu {
    flex-direction: column;
    align-items: flex-start;
  }
  .block-collapse {
    flex-direction: column;
  }
  .wrapper-info-top {
    &:first-child,
    &:nth-child(2) {
      padding-right: 0;
      padding-left: 0;
      border-right: none;
    }
    &:nth-child(2) {
      margin-top: 0;
    }
  }
  .photo-item {
    width: calc(50% - #{toRem(2)});
  }
}
@media (max-width: toRem(76.8)) {
  .entry-page {
    padding-top: toRem(11.6);
  }
  .entry-viewer {
    height: calc(100vh - #{toRem(11.6)});
  }
  .menu-right {
    height: calc(100vh - #{toRem(12)});
  }
  .desktop {
    display: none;
  }
  .responsive {
    display: initial;
  }
  .title {
    margin-right: 0;
    margin-bottom: toRem(1);
  }
  .wrapper-button {
    flex-direction: column;
    align-items: initial;
  }
  .disable-button {
    margin-right: 0;
    margin-bottom: toRem(1);
  }
  .button-collapse {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 0;
  }
  .photo-item {
    width: 100%;
    margin-right: 0;
  }
  .wrapper-info-top {
    width: 100%;
    margin-right: 0;
  }
  .wrapper-button {
    margin-top: toRem(1);
  }
  .photo-list {
    padding-right: toRem(2);
  }
  .delete-all {
    text-align: left;
  }
  .wrapper-select {
    flex-direction: column;
    align-items: initial;
  }
  .wrapper-photo-selected:nth-child(2) {
    margin-top: toRem(0.5);
  }
  .photo-selected-separator {
    display: none;
  }
  .entry-pagination {
    margin-top: toRem(0.5);
    margin-bottom: toRem(1);
  }
}

@media (max-width: toRem(50)) {
  .entry-page {
    height: calc(100vh - #{toRem(11)});
    overflow: hidden;
  }
  .entry-viewer {
    width: 100vw;
    position: fixed;
    z-index: 1;
  }
  .menu-right {
    padding-top: toRem(11);
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 0;
    width: 80vw;
    background-color: var(--white);
  }
  .menu-top {
    width: 0vw;
  }
  .button-close {
    position: absolute;
    right: 0;
    top: toRem(22);
    z-index: 3;
    height: toRem(5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: toRem(0.5);
    border-bottom-left-radius: toRem(0.5);
    background-color: var(--white);
    border: toRem(0.1) solid var(--black);
  }
  .menu-top {
    padding: toRem(1);
  }
  .menu-is-open {
    .menu-right {
      z-index: 3;
    }
    .menu-top {
      width: auto;
    }
    .button-close {
      left: calc(20vw - #{toRem(3)});
      right: initial;
    }
  }
  .entry-pagination {
    margin-top: toRem(1);
  }
}

@media (min-width: toRem(190)) {
  .menu-right {
    width: initial;
    max-width: toRem(100);
  }
  .entry-viewer {
    width: 100%;
  }
}
</style>
