/*
  This order ensures
  that styles in the 'theme' layer can override our base 'weon' styles.
*/
@layer weon, theme;

/* -----------------------------
   Base styles (in 'weon' layer)
----------------------------- */
@layer weon {
  .weon-button {
    /* Inherit typography from parent */
    font-family: var(--wp--preset--font-family--base, inherit);
    font-size: var(--wp--preset--font-size--normal, inherit);
    line-height: 1.5;
    text-decoration: none;

    /* Sensible defaults */
    cursor: pointer;
    padding: 0.75em 1.25em;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease,
      border-color 0.2s ease, filter 0.2s ease,
      text-decoration-thickness 0.2s ease;
  }

  .weon-button__content {
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  /* Icon */
  .weon-button__icon {
    width: 1.2em;
    height: 1.2em;
  }
}

/* -----------------------------
   Theme styles (in 'theme' layer)
----------------------------- */

/* -----------------------------
   Our Fallback Styles (in 'weon' layer)
----------------------------- */
@layer weon {
  /* Link style */
  .weon-button--link {
    background: none;
    border: none;
    padding: 0;
    color: var(
      --weon-custom-color,
      var(--color-link, var(--color-primary, currentColor))
    );
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .weon-button--link:hover {
    text-decoration-thickness: 2px;
  }

  .weon-button:focus:not(:focus-visible) {
    outline: none !important;
  }
  .weon-button:focus-visible {
    outline: 2px solid
      var(--wc--primary, var(--wp--preset--color--primary, #007cba));
    outline-offset: 2px;
  }
}