/* core/button */
.wp-block-buttons,
.wp-block-button.is-layout-flex,
.wp-block-button-is-layout-flex {
  width: fit-content;
  margin-top: 0;
  margin-bottom: var(--spacing-m);
}

/* Bouton primaire */
.wp-block-button.is-style-fill {
  width: fit-content;

  .wp-block-button__link {
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    will-change: background-color;
    background-color: white;
    color: var(--color-blue-700);
    border-color: transparent;
    box-shadow: none;
    border-radius: var(--radius-full);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-400);
    }
  }

  .wp-block-button__link:has(img, svg) {
    display: grid;
    grid-template-columns: max-content var(--spacing-24);
    gap: var(--spacing-8);

    img,
    svg {
      transition: translate var(--transition-duration) ease;
      transition-property: translate;
      will-change: translate;
    }

    &:hover,
    &:active,
    &:focus {
      img,
      svg {
        translate: var(--spacing-4) var(--spacing-0);
      }
    }
  }
}

/* Boutons secondaire */
.wp-block-button.is-style-outline {
  .wp-block-button__link {
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    border: 1px solid var(--color-blue-700);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    color: var(--color-blue-700);
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-blue-700);
      color: var(--color-white);
    }
  }

  .wp-block-button__link:has(img) {
    display: grid;
    grid-template-columns: max-content var(--spacing-24);
    gap: var(--spacing-8);

    img {
      transition: var(--transition-duration) ease;
      transition-property: translate, filter;
      will-change: translate, filter;
      filter: none; /* état par défaut */
    }

    &:hover,
    &:focus,
    &:active {
      img {
        filter: brightness(0) invert(1);
        translate: var(--spacing-4) var(--spacing-0);
      }
    }
  }
}

/* Boutons ghost */
.wp-block-button.is-style-ghost {
  .wp-block-button__link {
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-500);
    }
  }

  .wp-block-button__link:has(img) {
    display: grid;
    grid-template-columns: max-content var(--spacing-24);
    gap: var(--spacing-8);

    img {
      transition: var(--transition-duration) ease;
      transition-property: translate, filter;
      will-change: translate, filter;
      filter: none; /* état par défaut */
    }

    &:hover,
    &:focus,
    &:active {
      img {
        translate: var(--spacing-4) var(--spacing-0);
      }
    }
  }
}

/* Boutons secondaire - variante */
.wp-block-button.is-style-outline-variant {
  .wp-block-button__link {
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-white);
      color: var(--color-blue-700);
    }
  }

  .wp-block-button__link:has(img) {
    display: grid;
    grid-template-columns: max-content var(--spacing-24);
    gap: var(--spacing-8);

    img {
      transition: var(--transition-duration) ease;
      transition-property: translate, filter;
      will-change: translate, filter;
      filter: brightness(0) invert(1);
    }

    &:hover,
    &:focus,
    &:active {
      img {
        filter: none; /* état par défaut */
        translate: var(--spacing-4) var(--spacing-0);
      }
    }
  }
}

/* Bouton faire un don gutenberg */
.wp-block-button.is-style-donation-button {
  .wp-block-button__link {
    position: relative;
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-400);
    }
  }

  .wp-block-button__link::after {
    content: url("../../../images/heart.svg");
    position: absolute;
    top: -10px;
    right: -10px;
    width: 36px;
    height: 36px;
    transition: var(--transition-duration) ease;
    transition-property: right;
    will-change: right;
  }

  .wp-block-button__link:hover::after {
    right: -14px;
  }
}

/* Bouton faire un don header/footer */
.wp-block-button.is-rgoods-btn {
  .wp-block-button__link {
    position: relative;
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    border-radius: var(--radius-full);
    background-color: var(--color-yellow-500);
    color: var(--on-secondary);
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-400);
    }
  }

  /* Icône style header */
  .wp-block-button__link .heart {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 36px;
    height: 36px;
    transition: var(--transition-duration) ease;
    transition-property: right;
    will-change: right;
  }

  /* Icône style footer */
  .wp-block-button__link:has(.heart-v) {
    /* display: grid;
    grid-template-columns: max-content var(--spacing-24); */
    display: flex;
    gap: var(--spacing-8);
    align-items: center;

    .heart-v {
      position: relative;
      right: 0;
      transition: var(--transition-duration) ease;
      transition-property: right;
      will-change: right;
    }
  }

  .wp-block-button__link:hover .heart {
    right: -14px;
  }

  .wp-block-button__link:hover .heart-v {
    right: -5px;
  }
}

/* Bouton icône outline */
.wp-block-button.is-style-icon-button-outline {
  .wp-block-button__link {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: var(--spacing-8);
    transition: var(--transition-duration) ease;
    transition-property: background-color, filter;
    border: 1px solid var(--color-blue-700);
    border-radius: var(--radius-full);
    background: var(--color-white);
    will-change: background-color, filter;

    img {
      display: block;
      width: 24px;
      height: 24px;
      filter: none; /* état par défaut */
    }

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-blue-700);
      color: var(--color-white);

      img {
        filter: brightness(0) invert(1);
      }
    }
  }

  &:hover,
  &:active,
  &:focus,
  a:has(.wp-block-button__link):focus /* Permet d'avoir le focus sur les cards des liste des lieux  */ {
    .wp-block-button__link {
      background-color: var(--color-blue-700);
      color: var(--color-white);

      img {
        filter: brightness(0) invert(1);
      }
    }
  }
}

/* Bouton icône outline variant */
.wp-block-button.is-style-icon-button-outline-variant {
  .wp-block-button__link {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: var(--spacing-8);
    transition: var(--transition-duration) ease;
    transition-property: background-color, filter;
    border: 1px solid var(--color-white);
    border-radius: var(--radius-full);
    background-color: transparent;
    will-change: background-color, filter;
    color: var(--color-white);

    img {
      display: block;
      width: 24px;
      height: 24px;
      filter: brightness(0) invert(1);
    }

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-white);
      color: var(--color-blue-700);

      img {
        filter: none; /* état par défaut */
      }
    }
  }
}

/* Bouton icône ghost */
.wp-block-button.is-style-icon-button-ghost {
  .wp-block-button__link {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: var(--spacing-8);
    transition: var(--transition-duration) ease;
    transition-property: background-color, filter;
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    will-change: background-color, filter;

    img {
      display: block;
      width: 24px;
      height: 24px;
    }

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-500);
    }
  }
}

/* Bouton icône secondaire white */
.wp-block-button.is-style-button-secondary-white {
  .wp-block-button__link {
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    color: var(--color-blue-700);
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-500);
    }
  }

  .wp-block-button__link:has(img) {
    display: grid;
    grid-template-columns: max-content var(--spacing-24);
    gap: var(--spacing-8);

    img {
      transition: var(--transition-duration) ease;
      transition-property: translate, filter;
      will-change: translate, filter;
      filter: none; /* état par défaut */
    }

    &:hover,
    &:focus,
    &:active {
      img {
        translate: var(--spacing-4) var(--spacing-0);
      }
    }
  }
}