.-activity-calendar {
  margin-bottom: 5em;

  .rewind-card {
    @include rewind-border;

    @media screen and (width <= 475px) {
      padding: 0.5em;
    }
  }

  .rewind-calendar {
    border-collapse: unset;
    border-spacing: 3px;

    @media screen and (width <= 475px) {
      border-spacing: 1px;
    }

    tr {
      border: none;
    }
  }

  .activity-header-cell {
    font-size: 10px;
    font-weight: normal;
    text-align: left;
    color: #fff;
  }

  .rewind-calendar-cell {
    height: 10px;
    width: 10px;

    @media screen and (width <= 475px) {
      height: 5px;
      width: 5px;
    }

    &.-empty {
      background: var(--primary-low);
    }

    &.-low {
      background: var(--success);
    }

    &.-medium {
      background: var(--success-medium);
    }

    &.-high {
      background: var(--success-low);
    }
  }
}
