<script lang="ts">
    import { locale } from '$lib/translations';
    export let title: string;
    export let hint: string;
    let showExtraPlaceholder: boolean = true;
</script>

<div class="calculatorGroup {$locale}">
  <div class="calculatorGroup__Label">{title}</div>
  <div class="calculatorGroup__Hint">{hint}</div>
  <slot />
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .calculatorGroup {
    width: 100%;
    margin-bottom: 7px;

    &__Label {
      font-family: $Suisse;
      font-weight: 500;
      font-size: 18px;
      line-height: 26px;
      margin-bottom: 3px;

      @include breakpoint-down('tabL') {
        font-size: 16px;
        line-height: 24px;
      }
    }

    &__Hint {
      color: $qc-tech-blue;
      font-family: $Suisse;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      margin-bottom: 13px;

      @include breakpoint-down('tabL') {
        margin-bottom: 10px;
      }
    }
  }
</style>