@use "../../../../styles/abstracts/variables" as *;

.users__investments {
  width: 100%;
  color: $col-white;

  overflow: hidden;

  &__scroll {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    border: 1px solid $col-border-lining;

    border-radius: 14px;

    background: #19191b;

    scrollbar-width: thin;
  }

  &__grid {
    width: 100%;

    min-width: 1540px;
  }

  &__header {
    display: grid;

    grid-template-columns:
      250px
      150px
      150px
      100px
      200px
      200px
      150px
      150px;

    padding: 1rem;

    font-size: 0.8rem;

    font-weight: 600;

    background: #202024;

    border-bottom: 1px solid $col-border-lining;

    position: sticky;

    top: 0;

    z-index: 10;

    span {
      opacity: 0.8;
    }
  }

  &__body {
    display: flex;
    flex-direction: column;
  }

  .skeleton__row {
    display: grid;

    grid-template-columns:
      270px
      200px
      150px
      170px
      200px
      200px
      150px
      150px;

    gap: 1rem;

    padding: 1rem;
  }

  .skeleton__cell {
    height: 34px;

    border-radius: 8px;

    background: linear-gradient(
      90deg,
      #222 25%,
      #2e2e2e 50%,
      #222 75%
    );

    background-size: 400% 100%;

    animation: shimmer 1.5s infinite;
  }

  @keyframes shimmer {
    from {
      background-position: 100% 0;
    }

    to {
      background-position: -100% 0;
    }
  }
}

.attend__pagination {
  margin-top: 1rem;
}

/* ==========================
   TABLET
========================== */

@media (max-width: 1024px) {
  .users__investments {
    &__grid {
      min-width: 1450px;
    }
  }
}

/* ==========================
   MOBILE
========================== */

@media (max-width: 768px) {
  .users__investments {
    &__grid {
      min-width: 1300px;
    }

    &__header {
      font-size: 0.75rem;

      padding: 0.85rem;
    }
  }
}

.users__investments__scroll {
  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;

  border: 1px solid $col-border-lining;

  border-radius: 14px;

  background: #19191b;

  /* Firefox */
  scrollbar-width: none;

  /* IE / Edge */
  -ms-overflow-style: none;

  /* Chrome / Safari */
  &::-webkit-scrollbar {
    display: none;
  }
}