@import "../../../../styles.scss";
@import "../../../../assets/scss/variable";

.home {
  @include pageContainer;

  &__title {
    @include pageHeader;

  }

  &__users-card {
    @include cardContainer;

    &__header {
      @include header-icon;
      background-color: $purple-color;
      box-shadow: 0px 3px 6px $purple-shadow;
    }

    &__title {
      @include title;

      &__subtitle {
        @include subtitle;
      }
    }

    &__content {
      padding: 0;
      display: block;
      overflow: hidden;
      @include tableContainer;

      &__table {
        width: 100%;
        padding: 0;

        &__avatar {
          height: 35px;
          border-radius: 50%;
          object-fit: cover;
          border: 1px solid $orange-color;
          margin-right: 20px;
        }

        &__icon {
          margin-right: 20px;
          height: 35px;
        }

        &__logo {
          width: 24px;
        }

        @media(max-width: $breakpoint-xs) {
          &__avatar {
            margin-right: 10px;
          }

          &__icon {
            margin-right: 10px;
          }
        }

        &__description {
          word-break: break-word;
          margin-right: 5px;
        }

        &__description-popular {
          &__text {
            @include ellipsisText;
            width: 35vw;
          }
        }

        &__title {
          min-width: 5vw;
          word-break: break-word;
          padding-right: 10px;

          @media (max-width: $breakpoint-sm) {
            min-width: 10vw;
          }
        }

        &__time {
          color: $dark-grey-color;
          font-size: 14px;
          font-weight: lighter;
          @include ellipsisText;
        }
      }
    }
  }
}
