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

.full-ged {
  width: 100%;
  overflow: visible;

  &__content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    max-width: 1160px;
    margin: 0 auto;

    &__root-folder {
      .data-container {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;

        .ged-card__content {
          cursor: pointer;
        }
      }
    }

    &-right {
      width: calc(100% - 250px);
      padding-top: 6px;
      padding-left: 2.5rem;

      @include tablet {
        width: 100%;
        padding-left: 0;
      }

      &__root-folder {
        width: 100%;
        padding-left: 0;
      }
    }
  }

  &__loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(var(--color-light-rgb), 0.5);

    .loader-ui {
      width: 50px;
      height: 50px;
      padding-top: 0;
    }
  }

  &--minimal {
    .full-ged__content-right {
      width: 100%;
    }
  }
}

div.header-ged__search {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 1.8rem auto 3rem;

  &.has-bg {
    padding: 42px 0;
    background: url('../../../../assets/img/ged/ged.jpg') no-repeat center
      center/cover;
  }

  i {
    position: absolute;
    top: 50%;
    right: 2rem;
    font-size: var(--font-size-h3);
    transform: translateY(-50%);
  }

  .field-search__input {
    max-width: 428px;
    margin: 0 auto;
  }

  div.field-search__input input[type='text'] {
    height: 4.1rem;

    &,
    &::placeholder {
      color: var(--color-grey-200);
    }
  }

  input {
    height: 5rem;
    padding: 0 5.8rem 0 1.5rem;
    color: var(--color-text);
    background-color: var(--color-light);
    border: none;

    @include box-shadow(0, 0, 2px, rgba(var(--color-dark-rgb), 0.2));
  }
}

div.full-ged {
  &__header {
    flex-direction: column;
    margin: var(--spacing-3xl) 0 var(--spacing-xl) 0;

    .sops-banner {
      height: 160px;
    }

    &--bg:not(.sops-banner) {
      height: 130px;
    }

    &--bg {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      margin: var(--spacing-xl) 0;

      @include mobile {
        height: 190px;
      }
    }

    h1 {
      text-align: center;
    }

    .ebook-generation-container {
      margin-top: var(--spacing-s);
    }
  }

  &__content__root-folder > div {
    cursor: pointer;
    width: calc((100% - var(--spacing-xxl)) / 3);
    margin-bottom: var(--spacing-l);
    margin-right: var(--spacing-l);

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

    @include tablet {
      width: calc((100% - var(--spacing-xl)) / 2);

      &:nth-child(3n) {
        margin-right: var(--spacing-l);
      }

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

    @include mobile {
      width: 100%;
      margin-right: 0;

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

.skeleton-full-ged {
  width: 1160px;
  max-width: 90%;
  margin: auto;
}
