Language Filter

<div class="language-filter">
  <div class="language-filter__item">
    <label for="English">
      <input type="checkbox" value="en" id="English" checked="">
      <span class="language-filter__label">English</span>
    </label>
  </div>
  <div class="language-filter__item">
    <label for="Español">
      <input type="checkbox" value="es" id="Español">
      <span class="language-filter__label">Español</span>
    </label>
  </div>
  <div class="language-filter__item">
    <label for="Português">
      <input type="checkbox" value="pt" id="Português">
      <span class="language-filter__label">Português</span>
    </label>
  </div>
  <div class="language-filter__item">
    <label for="日本語">
      <input type="checkbox" value="ja" id="日本語">
      <span class="language-filter__label">日本語</span>
    </label>
  </div>
  <div class="language-filter__item">
    <label for="中文简体">
      <input type="checkbox" value="zh-cn" id="中文简体">
      <span class="language-filter__label">中文简体</span>
    </label>
  </div>
  <div class="language-filter__item">
    <label for="한국어">
      <input type="checkbox" value="ko" id="한국어">
      <span class="language-filter__label">한국어</span>
    </label>
  </div>
</div>

.language-filter {
  width: calc(100% + var(--spacing-2));
  margin-bottom: var(--spacing-2);
  margin-left: calc(var(--spacing-1) * -1);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.language-filter__item {
  padding: 0.6rem var(--spacing-1);
}

.language-filter__item input {
  display: none;
}

.language-filter__item input:checked + .language-filter__label {
  font-weight: var(--bold);
}

.language-filter__item input:checked + .language-filter__label:before {
  content: "\f057";
  font-family: FontAwesomeS;
  padding-right: 6px;
  font-size: var(--font-size-2);
}

.language-filter__label {
  cursor: pointer;
}

.language-filter {
    width: calc(100% + var(--spacing-2));
    margin-bottom: var(--spacing-2);
    margin-left: calc(var(--spacing-1) * -1);
    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;

    &__item {
        padding: 0.6rem var(--spacing-1);
    
        input {
            display: none;
            
            &:checked + .language-filter__label {
                font-weight: var(--bold);

                &:before {
                    content: "\f057";
                    font-family: FontAwesomeS;
                    padding-right: 6px;
                    font-size: var(--font-size-2);
                }
            }
        }
    }
    &__label {
        cursor: pointer;
    }
}