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

.repository {
  .spinner {
    display: inline;
    position: absolute;
    padding-left: 5px;
  }

  &__container {
    width: 100%;

    &__info {
      width: 100%;
    }
  }

  &__problem {
    @include cardContainer;
    margin-bottom: 40px;
    margin-top: 0px;
    border: none;

    &__card {
      font-size: 18px;
      font-weight: lighter;
      color: $dark-grey-3-color;

      @media (max-width: $breakpoint-xs) {
        text-align: center;
      }
    }

    @media (max-width: $breakpoint-xs) {
      margin-top: 0px;
    }
  }

  &__card-list {
    padding-top: 20px;
  }

  .red {
    background-color: $red-color;
  }

  .orange {
    background-color: $orange-color;
  }

  .green {
    background-color: $green-color;
  }

  .blue {
    background-color: $blue-color;
  }

  .header-container {
    min-height: 50px;
  }

  .repository-detail-card {
    padding: 0px;

    &__header {
      padding: 5px;

      border-radius: 3px;

      &__title {
        margin-top: 12px;
      }

      &__text {
        color: white;
      }
    }

    &__content {

      &__time-container{
        margin: 0;
      }

      &__description {
        font-size: 20px;
      }

      &__divider {
        width: 90%;
        margin: auto;
        left: auto;
      }

      &__time {
        font-weight: lighter;
        font-size: 14px;
        max-width: 100px;
        color: $dark-grey-2-color;
      }

      &__username {
        font-weight: bold;
        color: $dark-grey-color;
      }

      &__request-user {
        font-weight: bold;
        color: $orange-color;
      }

      &__title {
        max-width: 40vh;
      }

      @media (max-width: $breakpoint-md) {
        &__title {
          max-width: 250px;

          &__issues {
            display: flex;
            flex-direction: column;
          }
        }
      }

      &__time-container-bottom {
        width: 250px;
        justify-content: flex-start;
        div {
          display: flex;
        }
      }

      &__time-container-top {
        width: 250px;
        justify-content: flex-start;
        div {
          display:flex;
        }
      }

      @media (max-width: $breakpoint-md) {
        &__time-container-top {
          width: 120px;
          display: flex;
          font-size: 9pt;
          right: 0;
          top: 0;
        }

        &__time-container-bottom {
          width: 120px;
          display: block;
          position: absolute;
          font-size: 9pt;
          right: -5px;
        }
      }
    }
  }

  &__header {
    padding-left: 80px;

    &__icon {
      @include header-icon;
      background: $green-2-color;
      box-shadow: 0px 3px 6px $green-2-shadow;
    }

    &__panel__name {
      text-align: left;
      font-size: 20px;
      font-weight: lighter;
      word-break: break-word;
      @include ellipsisText;
    }

    &__panel__description {
      text-align: left;
      font-size: 0.9rem;
      font-weight: lighter;
      color: $dark-grey-color;
      max-width: 90%;

      @media (max-width: $breakpoint-lg) {
        @include ellipsisText;
      }
    }

    &__contributors {
      flex-direction: row-reverse;
      margin-right: 10px;
      display: flex;
      width: 100%;
      padding-top: 5px;
      justify-content: flex-start;
      align-items: center;

      @media (max-width: $breakpoint-lg) {
        padding-top: 0px;
      }

      &__avatar {
        margin-top: 3px;
        width: 32px;
        height: 32px;
        border-radius: 50%;

        @media (max-width: $breakpoint-lg) {
          margin-bottom: 5px;
        }
      }

      &__container {
        display: flex;
        align-items: center;

        &__length {
          color: $dark-grey-color;
          font-size: 16pt;
          padding-left: 5px;

          @media (max-width: $breakpoint-lg) {
            margin-bottom: 5px;
          }
        }
      }
    }

    &__warning {
      @include header-icon;
      background: none;
    }
  }

  @media (max-width: $breakpoint-lg) {
    &__header {
      padding-left: 80px;

      &__panel__name {
        font-size: 19px;
      }

      &__panel__description {
        font-size: 0.9rem;
        letter-spacing: 0.17px;
      }

      &__contributors {
        justify-content: space-between;
        margin-top: 10px;
        padding-top: 5px;
        border-top: 1px solid;
        border-top-color: $border-color;

        &__avatar {
          margin-top: 3px;
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }
      }
    }
  }

  .dasboard-info {
    .info {
      &__header {
        &__blue {
          border-bottom: 2px solid $blue-color;
        }

        &__red {
          border-bottom: 2px solid $red-color;
        }

        &__green {
          border-bottom: 2px solid $green-color;
        }

        &__orange {
          border-bottom: 2px solid $orange-color;
        }

        &__title {
          text-align: left;
          font-size: 16px;
          letter-spacing: 0.21px;
        }
      }

      &__body {
        &__description {
          text-align: left;
          letter-spacing: 0.21px;
        }

        &__line {
          text-align: left;
          font-weight: lighter;
          letter-spacing: 0.21px;
        }

        &__avatar {
          height: 35px;
          border-radius: 50%;
          object-fit: cover;
        }

        &__icon {
          transform: scale(1.5);
          margin-top: 5px;
        }
      }
    }
  }

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

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

  .empty {
    margin: auto;
    padding: 10px;
  }
}
