@use 'variables' as *;

.cpt-projects-list {
  margin-top: $spacing-sm;
  margin-bottom: $spacing-sm;

  .cpt-project {
    box-sizing: border-box;

    &.card {
      background-color: White;
      border: $border;
      box-shadow: $box-shadow;
      margin-bottom: $spacing-sm;
      max-width: 100%;
      min-width: fit-content;
      padding: 0;
    }

    &.cpt-project-status-closed {
      background-color: $black-wash;
    }

    .cpt-project-title {
      font-size: 20px;
      font-weight: bold;
      margin-top: 0;
      margin-bottom: $spacing-sm;
      text-transform: uppercase;

      a:not(:hover) {
        color: inherit;
        text-decoration: none;
      }
    }
  }

  .cpt-project-content {
    padding: $spacing-sm;
    
    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }
}

.cpt-project-stage-progress {
  margin-top: $spacing-sm;
  margin-bottom: $spacing-sm;

  .cpt-stage-progress-container {
    background-color: LightGray;
    border: $border;
    border-radius: 9999px;
    box-shadow: inset $box-shadow;
    box-sizing: content-box;
    height: 1em;
    margin-bottom: .25em;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .cpt-stage-progress-indicator {
    background-color: SteelBlue;
    border-radius: 9999px;
    box-shadow: $box-shadow;
    height: 1em;
    position: absolute;
      top: 0;
      left: 0;
    width: 1em;
  }

  .cpt-stage-labels {
    display: flex;
    gap: 0;
    justify-content: space-between;
    text-align: center;
    width: 100%;
  }

  .cpt-stage-label {
    font-size: 14px;
    line-height: $line-height-sm;
    text-align: center;

    &:first-child {
      text-align: left;
    }

    &:last-child {
      text-align: right;
    }

    &.current {
      font-weight: bold;
    }

    &.not-started {
      color: $light-text;
    }
  }
}

.cpt-project-meta {
  background-color: $gray-wash;
  font-size: 14px;
  line-height: $line-height-sm;
  padding: $spacing-xs $spacing-sm;

  .cpt-col {
    width: auto;
  }

  .cpt-project-meta-label {
    display: block;
    font-size: 12px;
    font-weight: bold;
  }

  .cpt-project-meta-value {
    display: block;
  }
}

.client-dashboard-projects {
  .cpt-project-status {
    margin-bottom: 0;
  }

  .cpt-project-title {
    margin-top: 0;
  }
}

.is-singular-project {
  .cpt-project-meta {
    background-color: unset;
    font-size: unset;
    padding: 0;
    margin: $spacing-sm 0 $spacing-xs 0;
  }
}