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

p {
  margin: 0;
}

.user-social {
  @apply com-m-0 com-mb-4;
  nb-card-header {
    @apply com-bg-gray-50;
    a {
      @apply com-flex com-m-0 com-text-lg com-font-medium com-text-Yankees-Blue com-no-underline com-items-center;
      fa-icon {
        @apply com-h-6 com-w-6 com-flex com-items-center com-justify-center com-mr-1;
      }
    }
  }

  .user-social-add {
    button {
      flex: 1;
      font-weight: $fw-400;
      text-transform: capitalize;
    }
  }

  .user-social-alert {
    font-weight: $fw-500;
    height: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    transition: all 0.4s ease-in-out;

    &.active {
      height: 56px;
      margin: $space-16 0;
      opacity: 1;
      padding: $space-16;
    }
  }

  .user-social-cards {
    @apply com-flex com-gap-4;
    nb-list-item {
      border: none;
      padding: 0;

      &.active {
        cursor: move;
      }

      app-user-social-card {
        width: 100%;
      }
    }
  }
}

.user-social-popup {
  min-width: 300px;
  width: 30vw;

  .user-social-popup-details {
    .user-social-popup-heading {
      margin-top: $space-8;
    }

    .user-social-popup-favicon {
      max-width: 16px;
    }

    .user-social-popup-image {
      max-height: 150px;
      max-width: 300px;
      overflow: hidden;

      img {
        width: 100%;
      }
    }
  }
}

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

// Drag and drop animations

.cdk-drag-preview {
  border-radius: $border-10;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

nb-list-item:last-child {
  border: none;
}

nb-list.cdk-drop-list-dragging nb-list-item:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

nb-card-body {
  @apply com-p-6;
}
