@import "../../../assets/scss/variables";

.dynamic-list {
  margin-bottom: 30px;
  min-height: 551px;

  & .list-head {
    display: flex;
    padding: 0 34px;
    font-weight: $light;
    margin-bottom: 8px;
    font-size: 1.4rem;
    color: $text-color;
    gap: 1.5rem;
  }

  & .list-row {
    position: relative;
    display: flex;
    border: 1px solid #EFEFEF;
    background-color: $white;
    min-height: 51px;
    height: auto;
    align-items: center;
    padding: 0 34px;
    margin-bottom: 10px;
    transition: 0.3s;
    font-size: 1.4rem;
    font-weight: $regular;
    color:$main-color;
    gap: 1.5rem;


    & .index {
      position: absolute;
      left: -25px;
      font-size: $index-size;
      font-weight: $medium;
      color: #D9D9D9;
    }


    & .acronym {
      font-weight: $bold;
      color: $main-color;
    }

    & .name {
      color: $main-color;
    }

    & .download{
      & span {
        display: none;
      }

      & a:hover {

        & img {
          display: none;
        }

        & span {
          display: initial;
          color: $white;
          background-color: $main-color;
          padding: 8px 25px;
        }
      }

      &.inactive a {
        pointer-events: none;
      }
    }

    & .ergo{
      font-weight: $bold;
      color: $main-color;
    }

    &:hover {
      background: #f5f5f5;
    }

    &.skeleton {
      background-color: #f5f5f5 !important;
      background: linear-gradient(-45deg, #eee, #fefefe);
      background-size: 400% 400%;
      animation: gradient 5s ease infinite;
    }
  }

  //SIZES FOR DIFFERENT TYPES OF COLUMNS

  //RIVIEW REPORTS COLUMNS
  & .acronym {
    flex: 0 0 150px;
  }

  & .name {
    flex: 1 0 0%;
  }

  & .report {
    flex: 0 0 275px;
    text-align: center;
  }

  & .eva {
    flex: 0 0 290px;
    text-align: center;
  }

  //RESCOM CONTRACTS COLUMNS

  & .ergo{
    flex: 0 0 120px;
  }

  & .name-surname{
    flex: 1 0 0;
    max-width: 709px;
  }

  & .category{
    flex: 0 1 190px;
  }

  & .duration{
    flex: 0 1 110px;
  }

  & .cost{
    flex: 0 01 150px;
  }

  & .tier{
    flex: 0 01 450px;
  }

  .rescom-project-contracts-btn {
    padding: 0.5rem 1.5rem;
    background-color: #707070;
    color: $white;
    font-size: 1.4rem;
    border-radius: 7px;
    cursor: pointer;

    &:hover {
      background-color: $main-color;
      color: #707070;
    }

    & .inactive {
      pointer-events: none;
      opacity: 0.5;
    }
  }

}