@use 'sass:map';
@use '@inside-library/styles/variables/variables' as *;
@use '@inside-library/styles/mixins/partials/common-mixin' as *;
@use '@inside-library/styles/mixins/partials/paragraphs-mixin' as *;

.doc-ged-modal {
  @include wysiwyg-table;

  .modal__header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 18rem;
    z-index: 8;
    transition: all 0.3s ease;

    .close-icon {
      position: absolute;
      cursor: pointer;
      top: 0;
      right: 0;
    }
  }

  .modal__body {
    position: relative;
    max-width: 100rem;
    max-height: inherit;
    margin: 0 auto;
    padding-top: 7rem;
    padding-left: 7rem;
    padding-right: 7rem;
    color: var(--color-text);
    font-size: 18px;

    @include mobile {
      padding-left: 2rem;
      padding-right: 2rem;
      max-width: 100%;
    }

    & > div {
      margin-bottom: 4rem;

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    &__actions {
      position: absolute;
      top: 90px;
      right: 0;
      transform: translateX(100%);

      .content__edit {
        text-align: center;
      }

      & > * {
        display: block;

        @include custom-break-min(map.get($breakpoints, mobile)) {
          margin-top: 1rem;
        }

        @include tablet {
          margin-left: 2rem;
        }

        &:first-child {
          margin-left: 0;
        }
      }

      .sid2-warning {
        font-size: var(--font-size-h3);
      }

      @include tablet {
        top: 20px;
        right: 50%;
        display: flex;
        align-items: center;
        transform: translateX(50%);
      }
    }

    &--intro {
      padding: 2rem 10%;
      border-radius: 2.3rem;
      background-color: var(--color-grey-light);

      .title {
        margin-bottom: 1.4rem;
        color: var(--color-text);
        font-size: 30px;
      }

      p {
        &::after {
          content: '\00A0';
        }
      }
    }

    &__section {
      margin-bottom: calc(var(--spacing-3xl) - var(--spacing-xs));

      &--title {
        font-size: 30px;
      }

      &--content {
        font-family: var(--font-primary);
        font-size: 18px;

        p {
          text-align: justify;
          line-height: 24px;
          font-size: 18px;

          &::after {
            content: '\00A0';
          }

          strong {
            font-size: 18px;
          }
        }
      }
    }

    &-header {
      margin-bottom: 4rem;
      text-align: center;

      .bookmark-ui {
        margin-top: 1rem;
      }
    }

    &-text {
      width: 100%;
      margin-bottom: 3rem;
    }

    &-files {
      margin-bottom: 4rem;

      &__file {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding-bottom: 2rem;
        margin-left: 4.5rem;
        border-bottom: 0.1rem solid var(--color-grey-100);

        &-type {
          position: absolute;
          top: 0.6rem;
          left: -4.5rem;
          color: var(--color-primary);
          font-size: var(--color-h3);
        }

        &-infos {
          p {
            &:first-of-type {
              color: var(--color-primary);
            }

            &:last-of-type {
              color: var(--color-text-light);
            }
          }
        }

        &-actions {
          i {
            color: var(--color-primary);

            &:first-of-type {
              margin-right: 1rem;
            }
          }
        }
      }
    }

    &-footer {
      margin-bottom: 6rem;

      p {
        color: var(--color-text-light);
        margin-bottom: 0.7rem;
      }

      a,
      div &__obsolete {
        color: var(--color-primary);
      }

      &__obsolete {
        cursor: pointer;
        position: relative;
        width: max-content;

        i {
          position: absolute;
          top: 0.4rem;
          right: -2.3rem;
          font-size: 12px;
        }
      }
    }
  }

  .default-text {
    line-height: 24px;
  }

  .paragraph-listing.default-text
    > div:not(.fetched-contents-paragraph-container),
  .modal__body__section--content,
  .modal__body--intro {
    @include wysiwyg;

    ul,
    ol {
      padding-left: var(--spacing-m);

      li {
        list-style-type: inherit;
      }
    }
  }
}

/*
* Modal
*/
.doc-ged-modal-container,
.doc-ged-tabs-modal-container {
  .modal-container__close {
    position: fixed;
    top: 140px;

    @at-root {
      .route-fr-louvre-hotels-group & {
        top: 100px;
      }

      .route-en-louvre-hotels-group & {
        top: 100px;
      }
    }

    @include mobile {
      top: 100px;
    }
  }

  div.v--modal-overlay {
    top: 112px;
    z-index: 5;

    @at-root {
      .route-fr-louvre-hotels-group & {
        top: 75px;
      }

      .route-en-louvre-hotels-group & {
        top: 75px;
      }
    }

    @include tablet {
      top: 84px;
    }
  }

  &.right-modal-layout .v--modal {
    top: 0 !important;
    width: 100vw !important;
  }
}
