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

.project-body {
  @include pageContainer;

  .repository {
    padding-bottom: 3rem;
  }

  .helper {
    margin-bottom: 3rem;
  }

  &__header {
    height: 100px;

    &__content {
      &__item {
        border-radius: 4px;
        background-color: #fff;
        cursor: pointer;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        font-weight: lighter;

        &__pings {
          border-radius: 4px;
          background-color: #fff;
          cursor: default;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 10px;
          font-weight: lighter;
        }
      }

      &__avatar {
        cursor: pointer;
        width: 40px;
        border-radius: 50%;
        object-fit: cover;
        height: 40px;

        img {
          width: 32px;
        }

        mat-icon {
          font-size: 35px;
        }
      }

      &__name {
        @include title;
        font-size: 22px;
        width: 30vw;
        padding-left: 0;
      }

      @media (max-width: $breakpoint-md) {
        &__name {
          width: 25vw;

          &__long {
            width: 55vw;
          }
        }
      }

      @media (max-width: $breakpoint-xs) {
        &__name {
          width: 30vw;

          &__long {
            width: 70vw;
          }
        }
      }
    }

    .actions-menu {
      background-color: #fff;
      border-radius: 4px;

      &__isActive {
        color: #fff;
        background-color: $blue-color;
      }
    }

    @media (max-width: $breakpoint-lg) {
      .information {
        display: none;
      }
    }

    @media (min-width: $breakpoint-lg) {
      .actions-menu {
        display: none;
      }
    }
  }
}
