/**
 * Core/search frontend styles
 * Ces styles couvrent les variantes de mise en page du bloc (input/border/radius).
 * L'icône du bouton (has-icon) est gérée ici pour surcharger les styles globaux des boutons.
 */

/* ======================================
 * Icône bouton (has-icon)
 * ====================================== */

/*
 * Le bouton Search hérite souvent de styles globaux via `.wp-element-button`
 * (fond vert + texte blanc). On force ici l'inverse : fond tertiary + icône secondary.
 */
.wp-block-search.wp-block-search .wp-block-search__button.has-icon,
.wp-block-search.wp-block-search__icon-button .wp-block-search__button {
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  line-height: 20px;
  border-radius: 0px !important;
  background: none !important;
  background-color: var(
    --wp--custom--semantic--color--background--action--tertiary--default,
    transparent
  ) !important;
  color: var(
    --wp--custom--semantic--color--foreground--action--secondary--default,
    currentColor
  ) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible !important;
  text-indent: -9999px;
  white-space: nowrap;
}

.wp-block-search.wp-block-search .wp-block-search__button.has-icon::before,
.wp-block-search.wp-block-search__icon-button .wp-block-search__button::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  border-radius: 0px;
}

.wp-block-search.wp-block-search .wp-block-search__button.has-icon svg,
.wp-block-search.wp-block-search__icon-button .wp-block-search__button svg {
  display: none !important;
}

/* ======================================
 * Base
 * ====================================== */

.wp-block-search {
  --sncf-search-border-width: var(--wp--custom--semantic--border--width--default, 1px);
  --sncf-search-radius: var(
    --wp--custom--component--form-field--search-radius,
    var(--wp--custom--semantic--border--radius--base, 4px)
  );
}

.wp-block-search__inside-wrapper {
  gap: var(--wp--custom--semantic--spacing--base, 8px) !important;
  border: none;
  align-items: center;
}

/* Cache le gap quand le champ de recherche est masqué (button-only + searchfield-hidden) */
.wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden
  .wp-block-search__inside-wrapper {
  overflow: hidden;
  gap: 0 !important;
}

/* Input par défaut */
.wp-block-search__inside-wrapper input {
  background-color: transparent !important;
  border: var(--sncf-search-border-width) solid
    var(--wp--custom--semantic--color--border--secondary, #d7d7d7) !important;
  padding: var(--wp--custom--semantic--spacing--base, 8px)
    var(--wp--custom--semantic--spacing--200, 16px);
  border-radius: var(--sncf-search-radius) !important;
}

.wp-block-search__inside-wrapper input:hover {
  background-color: transparent !important;
  border-color: var(
    --wp--custom--semantic--color--border--brand,
    var(--wp--custom--semantic--color--primary, currentColor)
  ) !important;
}

.wp-block-search__inside-wrapper input:focus {
  background-color: transparent !important;
  border: none !important;
  outline: calc(var(--sncf-search-border-width) * 2) solid
    var(
      --wp--custom--semantic--color--border--brand,
      var(--wp--custom--semantic--color--primary, currentColor)
    ) !important;
}

.wp-block-search__inside-wrapper button {
  margin: 0 !important;
}

/* ======================================
 * Bouton texte (par défaut)
 * ====================================== */

.wp-block-search .wp-block-search__button.wp-element-button:not(.has-icon) {
  background-color: var(
    --wp--custom--semantic--color--background--action--primary--default,
    var(--wp--preset--color--primary)
  ) !important;
  color: var(
    --wp--custom--semantic--color--foreground--action--primary--default,
    var(--wp--preset--color--on-primary)
  ) !important;
  border-radius: var(--sncf-search-radius) !important;
}

.wp-block-search .wp-block-search__button.wp-element-button:not(.has-icon):hover {
  background-color: var(
    --wp--custom--semantic--color--background--action--primary--hover,
    var(--wp--preset--color--primary-hover)
  ) !important;
  color: var(
    --wp--custom--semantic--color--foreground--action--primary--hover,
    var(--wp--preset--color--on-primary-hover)
  ) !important;
}

.wp-block-search .wp-block-search__button.wp-element-button:not(.has-icon):active,
.wp-block-search .wp-block-search__button.wp-element-button:not(.has-icon):focus {
  background-color: var(
    --wp--custom--semantic--color--background--action--primary--press,
    var(--wp--preset--color--primary-active)
  ) !important;
  color: var(
    --wp--custom--semantic--color--foreground--action--primary--press,
    var(--wp--preset--color--on-primary-active)
  ) !important;
  border: 0;
}

/* ======================================
 * Variante 2 : bouton à l'intérieur du champ
 * ====================================== */

/* Bouton texte */
.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__inside-wrapper {
  padding: 0 !important;
  gap: 0 !important;
}

.wp-block-search__button-inside.wp-block-search__text-button
  .wp-block-search__inside-wrapper
  input {
  border-right: none !important;
  border-radius: var(--sncf-search-radius) 0 0 var(--sncf-search-radius) !important;
  padding: var(--wp--custom--semantic--spacing--base, 8px)
    var(--wp--custom--semantic--spacing--200, 16px) !important;
}

.wp-block-search__button-inside.wp-block-search__text-button
  .wp-block-search__inside-wrapper
  button {
  border-radius: 0 var(--sncf-search-radius) var(--sncf-search-radius) 0 !important;
}

/* Bouton icône */
.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__inside-wrapper {
  padding: 0 !important;
  gap: 0 !important;
  border: var(--sncf-search-border-width) solid
    var(--wp--custom--semantic--color--border--secondary, #d7d7d7) !important;
  border-radius: var(--sncf-search-radius) !important;
  padding: var(--wp--custom--semantic--spacing--base, 8px)
    var(--wp--custom--semantic--spacing--200, 16px);
}

.wp-block-search__button-inside.wp-block-search__icon-button
  .wp-block-search__inside-wrapper
  input {
  border: none !important;
  border-radius: calc(var(--sncf-search-radius) - var(--sncf-search-border-width)) 0 0
    calc(var(--sncf-search-radius) - var(--sncf-search-border-width)) !important;
}

.wp-block-search__button-inside.wp-block-search__icon-button
  .wp-block-search__inside-wrapper
  input:hover {
  border: none !important;
}

.wp-block-search__button-inside.wp-block-search__icon-button
  .wp-block-search__inside-wrapper
  input:focus {
  border: none !important;
  outline: none !important;
  border-radius: calc(var(--sncf-search-radius) - (var(--sncf-search-border-width) * 2)) 0 0
    calc(var(--sncf-search-radius) - (var(--sncf-search-border-width) * 2)) !important;
}

.wp-block-search__button-inside.wp-block-search__icon-button
  .wp-block-search__inside-wrapper
  button {
  margin: 0
    calc(
      var(--wp--custom--semantic--spacing--200, 16px) -
        var(--wp--custom--semantic--spacing--050, 4px)
    ) !important;
}

/* 1px au hover (wrapper) */
.wp-block-search__button-inside.wp-block-search__icon-button
  .wp-block-search__inside-wrapper:hover {
  border-color: var(
    --wp--custom--semantic--color--border--brand,
    var(--wp--custom--semantic--color--primary, currentColor)
  ) !important;
  outline: none !important;
}

/* 2px au focus (input actif) */
.wp-block-search__button-inside.wp-block-search__icon-button
  .wp-block-search__inside-wrapper:focus-within {
  border-width: calc(var(--sncf-search-border-width) * 2) !important;
  border-color: var(
    --wp--custom--semantic--color--border--brand,
    var(--wp--custom--semantic--color--primary, currentColor)
  ) !important;
  outline: none !important;
}

/* ======================================
 * Variante 3 : aucun bouton (champ uniquement)
 * ====================================== */

.wp-block-search__no-button .wp-block-search__inside-wrapper {
  position: relative;
  padding: 0 !important;
  gap: 0 !important;
}

.wp-block-search__no-button .wp-block-search__inside-wrapper input {
  padding: var(--wp--custom--semantic--spacing--base, 8px)
    var(--wp--custom--semantic--spacing--200, 16px) !important;
  padding-left: calc(
    var(--wp--custom--semantic--spacing--200, 16px) +
      var(--wp--custom--component--form-field--right-icon-size, 16px) +
      var(--wp--custom--semantic--spacing--base, 8px)
  ) !important;
}

.wp-block-search__no-button .wp-block-search__inside-wrapper {
  color: var(
    --wp--custom--semantic--color--foreground--action--secondary--default,
    currentColor
  ) !important;
}

.wp-block-search__no-button .wp-block-search__inside-wrapper::before {
  content: '';
  position: absolute;
  left: calc(
    var(--wp--custom--semantic--spacing--200, 16px) - var(--wp--custom--semantic--spacing--050, 4px)
  );
  top: 50%;
  transform: translateY(-50%);
  width: var(--wp--custom--component--form-field--right-icon-size, 16px);
  height: var(--wp--custom--component--form-field--right-icon-size, 16px);
  background-color: currentColor;
  -webkit-mask-image: url('../../icons/recherche.svg');
  mask-image: url('../../icons/recherche.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ======================================
 * Variante 4 : bouton uniquement
 * ====================================== */

.wp-block-search__button-only.wp-block-search__searchfield-hidden {
  border: none;
}

.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
  padding: 0 !important;
  gap: 0 !important;
}

/* ======================================
 * Variante 5 : icône uniquement (button-only + icon-button)
 * ====================================== */

.wp-block-search__button-only.wp-block-search__icon-button button {
  margin: 0 !important;
}