<commit_before><template>
  <div class="foodkeeper-add-product-container">
    <div class="foodkeeper-add-product-form1-wrapper">
      <div class="foodkeeper-add-product-form1-add-icon">
        <div class="foodkeeper-add-product-form1-add-icon-bg">
          <span class="foodkeeper-add-product-form1-add-icon-text">+</span>
        </div>
      </div>
      <div class="foodkeeper-add-product-form1-itemgreen">
        <svg viewBox="0 0 100 100" class="foodkeeper-add-product-form1-itemgreen-icon right">
          <use xlink:href="#app-icon-close"></use>
        </svg>
        <input type="text" placeholder="Nom du garde manger" />
      </div>
      <div class="foodkeeper-add-product-form1-itemgreen">
        <input type="text" placeholder="Description du garde manger" />
      </div>
      <div class="foodkeeper-add-product-form1-filters">
        <input id="brut" class="filter" type="radio" value="false" v-model="type">
        <label for="brut" >Plats Préparés</label>
        <input id="prepare" class="filter" type="radio" value="true" v-model="type">
        <label for="prepare">Produits Bruts</label>
      </div>
      <select class="foodkeeper-add-product-form1-select" v-model="slectedAddress">
        <option>Légumes</option>
        <option>Légumes</option>
        <option>Légumes</option>
      </select>
      <div class="foodkeeper-add-product-form1-itemgreen">
        <svg viewBox="0 0 100 100" class="foodkeeper-add-product-form1-itemgreen-icon left">
          <use xlink:href="#app-icon-close"></use>
        </svg>
        <input class="quantity" type="text" value="1" readonly="readonly">
        <svg viewBox="0 0 100 100" class="foodkeeper-add-product-form1-itemgreen-icon right">
          <use xlink:href="#app-icon-close"></use>
        </svg>
      </div>
    </div>
    <div class="foodkeeper-add-product-form2-wrapper">
      <h3 class="foodkeeper-add-product-form2-title">À consommer sous</h3>
      <div class="foodkeeper-add-product-form2-dlc-range">
        <label for="product-dlc">jours</label>
        <input type="range" name="product-dlc" value="1" max="10" min="0" step="1"/>
        <div class="foodkeeper-add-product-form2-label-range">
            <p>0 jours</p>
            <p>10 jours</p>
        </div>
      </div>
      <div class="foodkeeper-add-product-form2-button">Ajouter</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
@import './../../styles/variables.scss';

.foodkeeper-add-product-container {
  display: flex;
  justify-content: space-between;
  align-content: center;
  flex-direction: column;
  height: calc(100vh - 60px);
}

  .foodkeeper-add-product-form1-wrapper {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
  }

    .foodkeeper-add-product-form1-add-icon {
      display: flex;
      justify-content: center;
      align-content: center;
      flex-direction: row;
    }

      .foodkeeper-add-product-form1-add-icon-bg {
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin: 20px 0;
        width: 75px;
        height: 75px;
        background: $color-white;
        border-radius: 50%;
      }

      .foodkeeper-add-product-form1-add-icon-text {
        text-align: center;
        font: 3em 'Karla-Regular', sans-serif;
        color: $color-red;
      }

    .foodkeeper-add-product-form1-select {
      margin: 20px auto 15px;
      padding: 0 25px;
      width: 262px;
      height: 40px;
      background: $color-green-lite;
      box-sizing: border-box;
      border: none;
      border-radius: 20px;
      text-transform: capitalize;
      color: $color-white;
      font: 1.5em 'Karla-Italic', sans-serif;

      option {
        text-transform: capitalize;
      }
    }

    .foodkeeper-add-product-form1-filters {
      text-align: center;
      line-height: 40px;

      input[type="radio"] {
        display: none;
      }

      .filter {
        + label {
          padding: 10px;
          height: 40px;
          border: 2px solid $color-white;
          border-radius: 20px;
          font: 1.15em 'Karla-Bold', sans-serif;
          color: $color-text;
          text-transform: uppercase;
        }

        &:first-child {
          + label {
            margin-right: 20px;
          }
        }

        &:checked {
          + label {
            background: $color-white;
          }
        }
      }
    }

    .foodkeeper-add-product-form1-itemgreen {
      position: relative;
      margin: 0px auto 15px;
      width: 260px;

      input {
        padding: 0 55px 0 25px;
        width: 100%;
        height: 40px;
        border: none;
        border-radius: 20px;
        box-sizing: border-box;
        font: 1.5em 'Karla-Italic', sans-serif;
        color: $color-white;
        background: $color-green-lite;

        &.quantity {
          font: 1.5em 'Karla-Bold', sans-serif;
          text-align: center;
        }
      }

      ::-webkit-input-placeholder {
        color: $color-white;
      }
    }

    .foodkeeper-add-product-form1-itemgreen-icon {
      position: absolute;
      top: 0;
      margin-top: 5px;
      width: 30px;
      height: 30px;
      fill: $color-white;

      &.left {
        left: 20px;
      }

      &.right {
        right: 20px;
      }
    }

  .foodkeeper-add-product-form2-wrapper {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    padding: 0 60px;<commit_msg>Bug CSS<commit_after><template>
  <div class="foodkeeper-add-product-container">
    <div class="foodkeeper-add-product-form1-wrapper">
      <div class="foodkeeper-add-product-form1-add-icon">
        <div class="foodkeeper-add-product-form1-add-icon-bg">
          <span class="foodkeeper-add-product-form1-add-icon-text">+</span>
        </div>
      </div>
      <div class="foodkeeper-add-product-form1-itemgreen">
        <svg viewBox="0 0 100 100" class="foodkeeper-add-product-form1-itemgreen-icon right">
          <use xlink:href="#app-icon-close"></use>
        </svg>
        <input type="text" placeholder="Nom du garde manger" />
      </div>
      <div class="foodkeeper-add-product-form1-itemgreen">
        <input type="text" placeholder="Description du garde manger" />
      </div>
      <div class="foodkeeper-add-product-form1-filters">
        <input id="brut" class="filter" type="radio" value="false" v-model="type">
        <label for="brut" >Plats Préparés</label>
        <input id="prepare" class="filter" type="radio" value="true" v-model="type">
        <label for="prepare">Produits Bruts</label>
      </div>
      <select class="foodkeeper-add-product-form1-select" v-model="slectedAddress">
        <option>Légumes</option>
        <option>Légumes</option>
        <option>Légumes</option>
      </select>
      <div class="foodkeeper-add-product-form1-itemgreen">
        <svg viewBox="0 0 100 100" class="foodkeeper-add-product-form1-itemgreen-icon left">
          <use xlink:href="#app-icon-close"></use>
        </svg>
        <input class="quantity" type="text" value="1" readonly="readonly">
        <svg viewBox="0 0 100 100" class="foodkeeper-add-product-form1-itemgreen-icon right">
          <use xlink:href="#app-icon-close"></use>
        </svg>
      </div>
    </div>
    <div class="foodkeeper-add-product-form2-wrapper">
      <h3 class="foodkeeper-add-product-form2-title">À consommer sous</h3>
      <div class="foodkeeper-add-product-form2-dlc-range">
        <label for="product-dlc">jours</label>
        <input type="range" name="product-dlc" value="1" max="10" min="0" step="1"/>
        <div class="foodkeeper-add-product-form2-label-range">
            <p>0 jours</p>
            <p>10 jours</p>
        </div>
      </div>
      <div class="foodkeeper-add-product-form2-button">Ajouter</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
@import './../../styles/variables.scss';

.foodkeeper-add-product-container {
  display: flex;
  justify-content: space-between;
  align-content: center;
  flex-direction: column;
  height: calc(100vh - 60px);
}

  .foodkeeper-add-product-form1-wrapper {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
  }

    .foodkeeper-add-product-form1-add-icon {
      display: flex;
      justify-content: center;
      align-content: center;
      flex-direction: row;
    }

      .foodkeeper-add-product-form1-add-icon-bg {
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin: 20px 0;
        width: 75px;
        height: 75px;
        background: $color-white;
        border-radius: 50%;
      }

      .foodkeeper-add-product-form1-add-icon-text {
        text-align: center;
        font: 3em 'Karla-Regular', sans-serif;
        color: $color-red;
      }

    .foodkeeper-add-product-form1-select {
      margin: 20px auto 15px;
      padding: 0 25px;
      width: 262px;
      height: 40px;
      background: $color-green-lite;
      box-sizing: border-box;
      border: none;
      border-radius: 20px;
      text-transform: capitalize;
      color: $color-white;
      font: 1.5em 'Karla-Italic', sans-serif;

      option {
        text-transform: capitalize;
      }
    }

    .foodkeeper-add-product-form1-filters {
      text-align: center;
      line-height: 40px;

      input[type="radio"] {
        display: none;
      }

      .filter {
        + label {
          padding: 10px;
          height: 40px;
          border: 2px solid $color-white;
          border-radius: 20px;
          font: 1.15em 'Karla-Bold', sans-serif;
          color: $color-text;
          text-transform: uppercase;
        }

        &:first-child {
          + label {
            margin-right: 20px;
          }
        }

        &:checked {
          + label {
            background: $color-white;
          }
        }
      }
    }

    .foodkeeper-add-product-form1-itemgreen {
      position: relative;
      margin: 0px auto 15px;
      width: 260px;

      input {
        padding: 0 55px 0 25px;
        width: 100%;
        height: 40px;
        border: none;
        border-radius: 20px;
        box-sizing: border-box;
        font: 1.5em 'Karla-Italic', sans-serif;
        color: $color-white;
        background: $color-green-lite;

        &.quantity {
          font: 1.5em 'Karla-Bold', sans-serif;
          text-align: center;
          padding: 0 55px 0 55px;
        }
      }

      ::-webkit-input-placeholder {
        color: $color-white;
      }
    }

    .foodkeeper-add-product-form1-itemgreen-icon {
      position: absolute;
      top: 0;
      margin-top: 5px;
      width: 30px;
      height: 30px;
      fill: $color-white;

      &.left {
        left: 20px;
      }

      &.right {
        right: 20px;
      }
    }

  .foodkeeper-add-product-form2-wrapper {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    padding: 0 60px;
{'fraction_non_alphanumeric': 0.14709584607085058, 'fraction_numerical': 0.02607444704189894, 'mean_word_length': 2.0786050373650706, 'pattern_counts': {'":': 0, '<': 141, '<?xml version=': 0, '>': 141, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3626022', 'n_tokens_mistral': 3892, 'n_tokens_neox': 3627, 'n_words': 677}