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

.streak-info {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-bottom: 24px;

  .label {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-bottom: 4px;
  }

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

.chart-section {
  margin-bottom: 32px;

  .chart-wrapper {
    height: 200px;
    position: relative;
    overflow: hidden;

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

.edit-section {
  .date-label {
    font-weight: 600;
    margin-bottom: 16px;
  }

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

.settings-btn {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

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