18F/culper

.summary-progress {
  color: $eapp-grey-darker;
  margin: 4rem 0 2rem 0;
  padding: 1.5rem;
  border: 1px solid $color-gray-lighter;
  border-radius: 4px;

  @media all and (max-width: 980px) {
    text-align: center;
  }

  .content {
    display: inline-block;
    width: 80%;

    @media all and (max-width: 980px) {
      display: block;
      width: 100%;
      margin-bottom: 1rem;
    }

    .summary-icon {
      display: inline-block;
      height: 100%;
      width: auto;
      transition: all 0.3s;
      border-radius: 0;
      vertical-align: middle;

      svg,
      img {
        height: 4.6rem;
        width: 4.6rem;
        transition: all 0.3s;
      }
    }

    .title {
      padding-left: 1rem;
      font-weight: bolder;
    }

    .progress {
      position: relative;
      height: 0.7rem;
      background: $eapp-grey-lightest;

      .filled {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: $eapp-green;
        width: 0;
        transition: width 0.8s;
      }

      .gap {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: none;
        width: 0;
        transition: width 0.8s;
      }
    }
  }

  .stats {
    display: inline-block;
    width: 20%;
    text-align: center;
    vertical-align: bottom;

    .fraction {
      &.covered {
        color: $eapp-green;
      }

      .completed {
        font-weight: bold;
        font-size: 26pt;
      }

      .slash {
        font-weight: bold;
        font-size: 26pt;
      }

      .total {
        font-weight: bold;
        font-size: 26pt;
      }
    }

    .unit {
      font-weight: bold;
    }
  }
}