@import '~base/sass/base/variables';
@import '~base/sass/base/functions';
@import '~base/sass/base/grid';
@import '~base/sass/base/stat-cards';

.stat-card {

  .main-content {

    .main-data-container {
      display: flex;
      align-items: center;
      color: $primary-color;
      padding: calcRem(20) 0;
      margin-top: auto;
      min-height: calcRem(90);
      box-sizing: border-box;

      .current-data {
        font-weight: 900;
        font-size: calcRem(32);
        line-height: 100%;
        height: 100%;
      }

      .previous-comparison {
        font-weight: normal;
        margin-left: calcRem(15);
        padding: calcRem(5) 0 calcRem(5) calcRem(15);
        border-left: calcRem(1) solid $primary-color;
      }

      .comparison-value {
        font-weight: bold;
        font-size: calcRem(18);
        display: block;
      }

      .comparison-text {
        font-size: calcRem(12);
        display: block;
      }
    }

    .history-toggle {
      // override those pesky LMS styles
      background: none;
      text-shadow: none;
      font: inherit;
      text-transform: none;
      letter-spacing: normal;
      //
      color: lighten($base-text-color, 50%);
      font-size: calcRem(14);
      font-weight: bold;
      border: none;
      outline: none;
      box-shadow: none;
      cursor: pointer;
      padding: 0;
      text-align: left;

      &:hover {
        color: $primary-color;
      }
    }

    .history-toggle-faux {
      height: calcRem(19);
    }
  }

  .history-content {
    flex-shrink: 1;
    flex-grow: 1;
  }
}
