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

nb-card {
  box-shadow: rgb(255 255 255 / 20%) 0 0 0 1px inset, rgb(0 0 0 / 90%) 0 0 0 1px;
  max-height: 600px;
  width: 300px;
  z-index: 1000;

  nb-card-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;

    padding: 1rem 1rem;

    .user-tags {
      nb-tag-list {
        nb-tag {
          background-color: $azureish-white;
          border: none;
          border-radius: $border-10;
          color: $gunmetal;
          font-size: $fs-h5;
          font-weight: $fw-500;
          padding: $space-2 $space-8;
        }
      }
    }

    .user-statistics-container {
      display: flex;
      justify-content: space-evenly;

      .entity-count {
        align-items: center;
        color: $cadet;
        display: flex;
        flex-direction: column;
        font-size: $fs-h6;
        margin: 0 $space-4;

        p {
          margin: 0;
        }
      }
    }

    .buttons-container {
      display: flex;
      justify-content: space-between;

      button {
        background-color: $white;
        border: 1px solid rgba($neon-blue, 0.2);
        border-radius: $border-10;
        color: $neon-blue;
        font-size: $fs-h6;
        font-weight: $fw-400;
        height: 32px;
        padding: $space-8;
        text-transform: none;
        width: 120px;

        nb-icon {
          margin-right: $space-4;
        }
      }

      app-user-follow {
        &::ng-deep {
          .user-follow {
            button {
              width: 120px;
            }
          }
        }
      }
    }
  }
}

.fade-in {
  animation-duration: 1s;
  animation-name: FadeIn;
  transition-timing-function: linear;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
