@use "../../../../styles/abstracts/variables";
@use "../../../../styles/abstracts/mixins";

.users {
  @include mixins.adminPageIntro;

  margin-top: 1.2rem;
  width: 100%;
  overflow: hidden;

  /* ===================================== */
  /* SEARCH */
  /* ===================================== */

  &__header {
    margin-bottom: 1rem;

    &--form {
      display: flex;
      align-items: center;
      gap: 1rem;
      // background: red;
      height: 3rem !important;

      // @media (max-width: 768px) {
      //   flex-direction: column;
      // }

      &--left {
        flex: 1;

        display: flex;
        align-items: center;
        gap: 0.75rem;

        height: 46px;

        padding: 0 1rem;

        border-radius: 12px;

        background: #19191b;

        border: 1px solid variables.$col-border-lining;
      }

      input {
        width: 100%;
        background: transparent !important;
        border: none;
        outline: none;
        color: #fff;
        font-size: 0.85rem;

        &::placeholder {
          color: rgba(255, 255, 255, 0.45);
        }
      }

      button {
        height: 46px;

        padding: 0 1.25rem;

        border: none;

        border-radius: 10px;

        background: variables.$col-orange;

        color: variables.$col-dark;

        font-size: 0.82rem;

        font-weight: 600;

        cursor: pointer;
      }
    }
  }

  /* ===================================== */
  /* TABLE */
  /* ===================================== */

  &__content {
    margin-top: 1rem;

    border-radius: 16px;

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

    background: #19191b;

    overflow: hidden;
  }

  &__table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__table {
    display: grid;

    grid-template-columns:
      250px
      200px
      150px
      250px
      140px
      160px;

    min-width: 1130px;

    padding: 1rem 1.25rem;

    background: rgba(255, 255, 255, 0.02);

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

    white-space: nowrap;

    span {
      color: rgba(255, 255, 255, 0.55);

      font-size: 0.74rem;

      font-weight: 600;

      text-transform: uppercase;

      letter-spacing: 0.04em;
    }
  }

  &__children {
    min-width: 1130px;
  }

  /* ===================================== */
  /* SKELETON */
  /* ===================================== */

  .skeleton__row {
    display: grid;

    grid-template-columns:
      250px
      200px
      150px
      250px
      120px
      160px;

    gap: 1rem;

    padding: 1rem 1.25rem;
  }

  .skeleton__cell {
    height: 14px;

    border-radius: 999px;

    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.04)
    );

    background-size: 200% 100%;

    animation: shimmer 1.4s infinite;
  }

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

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

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}