.view-derniers-podcasts {
}

/*
 * https://www.drupal.org/project/better_exposed_filters/issues/2938761
 * AJAX form filtering does not work with BEF Links. We use styles radios.
 */
.view-derniers-podcasts .views-exposed-form.bef-exposed-form input.form-radio {
  display: none;
}

.view-derniers-podcasts .views-exposed-form.bef-exposed-form .form-radios .js-form-item:nth-child(1) label {
  text-transform: uppercase;

  font-size: 2em;
  font-weight: 300;
  color: var(--color-accent);
  background-color: var(--color-black);

  padding-left: 1em;
}

.view-derniers-podcasts .views-exposed-form.bef-exposed-form label {
    text-transform: uppercase;

    font-weight: 800;
    font-size: 1.2em;

    background-color: var(--color-black);
    color: var(--color-light);

    cursor: pointer;

    padding-left: 2em;

    min-width: unset;
}

/* Which means we need to add a hover state. */
.view-derniers-podcasts .views-exposed-form.bef-exposed-form label:hover {
  color: white;
}

/* Changes the label if the input is checked.  Like an active state. */
.view-derniers-podcasts .views-exposed-form.bef-exposed-form input.form-radio:checked + label {
  color: white;
}

.view-derniers-podcasts .form-item {
    margin: 0;
}

.view-derniers-podcasts .bef-exposed-form .form--inline > .form-item {
    float: unset;
}

.view-derniers-podcasts .views-exposed-form.bef-exposed-form .form-radios {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background: var(--color-black);
}