@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.file-nav-ged {
  position: relative;
  min-height: 45rem;

  &__body-folder {
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  &__body-intro {
    margin-bottom: 2rem;
    font-size: var(--font-size-h5);
  }

  &__body-folder,
  &__body-album {
    position: relative;

    &::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 96%;
      height: 0.1rem;
      transform: translateX(-50%);
      background-color: var(--color-grey-200);
      content: '';
    }

    &--noborder {
      padding-bottom: 0;
      margin-bottom: 0;

      &::after {
        display: none;
      }
    }
  }

  &__body {
    padding-top: 2rem;
  }

  &__body-album,
  &__body-media {
    display: flex;
    flex-wrap: wrap;

    .card-ged {
      @include desktop-only {
        margin-right: 2%;

        &:nth-child(3n) {
          margin-right: 0;
        }
      }

      @include tablet-to-mobile {
        &:nth-child(odd) {
          margin-right: 4%;
        }

        &:nth-child(even) {
          margin-right: 0;
        }
      }

      @include mobile {
        margin-right: 0;
      }
    }

    &::after {
      width: 32%;
      content: '';

      @include tablet {
        width: 48%;
      }

      @include mobile {
        width: 100%;
      }
    }
  }

  &__body-album {
    width: 100%;
    padding-bottom: 2rem;
    margin-bottom: 4rem;

    .card-ged {
      margin-bottom: 4rem;
    }
  }

  &__body-media {
    width: 100%;
  }

  &__header ul,
  &__body ul {
    display: flex;
    border-radius: 3rem;
    transition: all 0.3s ease;

    @include tablet {
      justify-content: space-between;
    }

    &:not(.header-filters):hover {
      background-color: var(--color-grey-100);

      .content__edit {
        opacity: 1;
      }
    }

    &:hover .list-ged__title {
      cursor: pointer;
      transition: all 0.3s ease;
    }

    li {
      display: flex;
      align-items: center;

      &:hover {
        &.list_ged title {
          transition: all 0.3s ease;
        }
      }

      &:first-of-type {
        width: 49%;

        @include tablet {
          width: 100%;
        }
      }

      &:nth-of-type(2) {
        width: 20%;

        @include tablet {
          width: 20%;
        }
      }

      &:nth-of-type(3) {
        width: 22%;

        @include tablet {
          width: 25%;
        }
      }

      &:last-of-type {
        justify-content: space-between;
        width: 6.4rem;
        padding-right: 2rem;

        @include tablet {
          padding-right: 0;
          width: 5rem;
        }
      }
    }
  }

  &__header {
    text-transform: uppercase;
    color: var(--color-text);
    letter-spacing: 1.5px;
    font-weight: inherit;
    font-size: 12px;

    &-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 2rem;

      p {
        display: block;
        max-width: 85%;
        font-family: var(--font-primary);
        font-size: var(--font-size-h4);
        text-transform: initial;

        .photos-length {
          color: var(--color-text);
        }
      }

      i {
        font-size: var(--font-size-h4);
        color: var(--color-primary);
        cursor: pointer;
      }
    }
  }

  &__body {
    &.cards-wrapper {
      @include tablet {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-left: 0;
      }

      @include mobile {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
      }
    }

    ul li:first-of-type {
      padding-left: 2rem;

      @include tablet {
        padding-left: 0;
      }
    }
  }

  .loading-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(var(--color-light-rgb), 0.3);

    .loader-ui {
      max-width: 70px;
      padding-top: 50vh;
      margin: 0 auto;
    }
  }
}

.file-nav-ged__no-docs {
  padding: calc(var(--spacing-3xl) + var(--spacing-xl)) 0;
  text-align: center;
}

.file-nav-ged__results {
  &__no-content,
  &__count {
    padding: 1rem 2rem;

    @include tablet {
      padding-left: 0;
    }
  }

  &__count {
    margin-bottom: var(--spacing-s);
    font-size: var(--font-size-h4);
  }

  .file-nav-ged__body-folder::after {
    display: none;
  }
}

.album-footer {
  justify-content: space-between;

  .btn {
    padding: var(--spacing-xs) var(--spacing-m);
    font-size: 13px;
  }
}
