.-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;
  }

  .rewind-calendar-cell {
    height: 10px;
    width: 10px;
    @media screen and (width <= 475px) {
      height: 5px;
      width: 5px;
    }
    border-radius: calc(var(--rewind-border-radius) / 2);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    &.-empty {
      background: var(--primary-low);
    }
    &.-low {
      background: var(--tertiary-low);
    }
    &.-medium {
      background: var(--tertiary-medium);
    }
    &.-high {
      background: var(--tertiary-high);
    }
  }
}