@use '../../../../styles/_globals.scss' as *;

.streak-info {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-bottom: var(--s3);

  .label {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-bottom: var(--s-half);
  }

  .value {
    font-size: 1.125rem;
  }
}

.chart-section {
  margin-bottom: var(--s4);

  .chart-wrapper {
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
    position: relative;

    lazy-chart {
      width: 100%;
      display: block;
      // Do NOT force `canvas { width/height }` here. Chart.js writes the canvas
      // size inline on every responsive resize; overriding it (esp. height:auto)
      // makes its ResizeObserver chase a size it didn't set -> sub-pixel jitter loop (#7957).
    }

    @include mq(xs) {
      min-width: 500px;
    }

    @include mq(sm) {
      min-width: 740px;
    }
  }
}

.edit-section {
  .date-label {
    font-weight: 600;
    margin-bottom: var(--s2);
  }

  mat-form-field {
    width: 100%;
  }
}

.settings-btn {
  margin-top: var(--s3);
  display: flex;
  justify-content: flex-end;
}

:host-context([dir='rtl']) {
  direction: rtl;
}
