@import './apps/commudle-admin/src/assets/styles/variables';

p {
  margin: 0;
}

a {
  @apply md:com-w-auto com-w-full;
}

.user-social-card {
  @apply com-m-0 com-border com-border-solid com-border-Bright-Gray com-rounded-lg;

  nb-card-body {
    @apply com-flex com-flex-row com-p-4 com-w-full;

    .user-social-card-image {
      @apply md:com-w-[196px] md:com-h-[124px] com-h-[142px] com-w-full com-flex com-justify-center com-items-center;

      img {
        @apply com-w-full;
      }
    }

    .user-social-card-details {
      @apply com-flex com-flex-col com-ml-4 com-no-underline com-w-full;

      .user-social-card-tags {
        @apply com-flex com-flex-wrap com-gap-1;

        .user-social-card-tag {
          @apply com-bg-blue-50 com-rounded-3xl com-text-Azure com-text-xs com-font-medium com-px-3 com-py-1;
        }
      }

      .tags-favicon {
        @apply com-flex com-justify-between com-mb-4;
      }

      .user-social-card-title {
        @apply com-text-Yankees-Blue com-text-base com-font-medium com-mb-2;
      }

      .user-social-card-description {
        @apply com-text-sm com-font-normal com-text-gray-500;
      }

      .user-social-card-favicon {
        @apply com-bg-tWhite com-ml-5 com-rounded-full com-max-w-5 com-max-h-5 com-flex-shrink-0;
      }
    }

    .content {
      @apply com-flex com-flex-col;
    }

    .content-button {
      @apply com-flex com-flex-row;
    }

    .user-social-card-delete {
      float: right;
      font-weight: $fw-400;
      position: relative;
      text-transform: capitalize;
    }
  }
}

@media all and (max-width: $tab-width) {
  .user-social-card {
    nb-card-body {
      flex-direction: column;

      .user-social-card-image {
        margin-bottom: $space-16;
      }

      .user-social-card-details {
        margin-left: 0;
      }
    }
  }
}
