/* ==========================================================
   MURRINMEDIA BUTTON SYSTEM
   ==========================================================

   Bricks Theme Styles control:
   - Typography
   - Font weight
   - Padding and sizes
   - Border radius

   This CSS controls:
   - Colours and borders
   - Solid, outline, ghost and link appearances
   - Hover and focus states
   - Optional arrows
   - Optional hover transforms
   - Transitions and reduced motion

   COLOURS
   .btn--primary
   .btn--secondary
   .btn--tertiary
   .btn--base
   .btn--dark
   .btn--light

   APPEARANCES
   Solid is the default.
   .btn--outline
   .btn--ghost
   .btn--link

   ARROWS
   .btn--arrow-right
   .btn--arrow-up-right

   HOVER TRANSFORMS
   .btn--lift
   .btn--scale

   Combine ONE colour class with
   optional modifiers.

========================================================== */


/* ==========================================================
   1. GLOBAL BUTTON SETTINGS
========================================================== */

:root {

  /* Text contrast: adjust for each client's colours */

  /* Brand colours use the readable text colour Bricks Productivity
     calculates for each palette colour, so no per-client tweaking. */
  --btn-on-primary: var(--brxp-a11y-primary-text, #fff);
  --btn-on-secondary: var(--brxp-a11y-secondary-text, #1a1a1a);
  --btn-on-tertiary: var(--neutral-d-10); /* tertiary is ours, set by hand */

  --btn-on-base: var(--brxp-a11y-surface-text, #fff);

  --btn-on-dark: #ffffff;
  --btn-on-light: #171717;


  /* Borders */

  --btn-border-width: 2px;

  /* Shared sizing: set these to match Bricks Theme Styles. */
  --btn-font-family: inherit;
  --btn-font-size: var(--text-m, 1rem);
  --btn-font-weight: 600;
  --btn-line-height: 1.4;
  --xbtn-padding-block: 12px;
  --xbtn-padding-inline: 24px;
  --btn-radius: 4px;


  /* Transitions */

  --btn-speed: 250ms;
  --btn-easing: ease-in-out;


  /* Optional hover transforms */

  --btn-lift: -3px;
  --btn-scale: 1.04;


  /* Arrow spacing */

  --btn-arrow-gap: 0.8em;
  --btn-arrow-size: 0.8em;
  --btn-arrow-distance: 3px;

}


/* ==========================================================
   2. COLOUR DEFINITIONS

   Uses your existing Bricks colour tokens.

   The outline colour can be adjusted
   independently for accessibility.

   Each class defines:
   --btn-color
   --btn-hover
   --btn-contrast
   --btn-outline-color
   --btn-ghost-hover

========================================================== */


/* Primary brand */

.btn--primary {
  --btn-color: var(--primary);
  --btn-hover: var(--primary-d-1);
  --btn-contrast: var(--btn-on-primary);

  --btn-outline-color: var(--primary);
  --btn-outline-hover: var(--primary-d-1);

  --btn-ghost-hover: var(--primary-t-1);
}


/* Secondary brand */

.btn--secondary {
  --btn-color: var(--secondary);
  --btn-hover: var(--secondary-d-1);
  --btn-contrast: var(--btn-on-secondary);

  --btn-outline-color: var(--secondary);
  --btn-outline-hover: var(--secondary-d-1);

  --btn-ghost-hover: var(--secondary-t-2);
}


/* Tertiary brand */

.btn--tertiary {
  --btn-color: var(--tertiary);
  --btn-hover: var(--tertiary-d-1);
  --btn-contrast: var(--btn-on-tertiary);

  --btn-outline-color: var(--tertiary);
  --btn-outline-hover: var(--tertiary-d-1);

  --btn-ghost-hover: var(--tertiary-t-2);
}


/* Base: brand-tinted neutral */

.btn--base {
  --btn-color: var(--base);
  --btn-hover: var(--base-d-1);
  --btn-contrast: var(--btn-on-base);

  --btn-outline-color: var(--base);
  --btn-outline-hover: var(--base-d-1);

  --btn-ghost-hover: var(--base-t-1);
}


/* Dark: dark neutral shade */

.btn--dark {
  --btn-color: var(--neutral-d-8);
  --btn-hover: var(--neutral-d-6);
  --btn-contrast: var(--btn-on-dark);

  --btn-outline-color: var(--neutral-d-8);
  --btn-outline-hover: var(--neutral-d-6);

  --btn-ghost-hover: var(--neutral-l-8);
}


/* Light: light neutral shade */

.btn--light {
  --btn-color: var(--white);
  --btn-hover: var(--neutral-l-10);
  --btn-contrast: var(--btn-on-light);

  --btn-outline-color: var(--white);
  --btn-outline-hover: var(--neutral-l-10);

  --btn-ghost-hover: rgba(255, 255, 255, 0.12);
}


/* ==========================================================
   3. SHARED BUTTON BEHAVIOUR

   No .btn base class required.

   All colour classes automatically
   receive the same default styling.

========================================================== */

:is(
  .btn--primary,
  .btn--secondary,
  .btn--tertiary,
  .btn--base,
  .btn--dark,
  .btn--light
) {

  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background-color: var(--btn-color);
  border: var(--btn-border-width) solid var(--btn-color);
  color: var(--btn-contrast);

  text-decoration: none;
  cursor: pointer;

  transition:
    background-color var(--btn-speed) var(--btn-easing),
    border-color var(--btn-speed) var(--btn-easing),
    color var(--btn-speed) var(--btn-easing),
    transform var(--btn-speed) var(--btn-easing);

}


/* Bricks theme style defaults (e.g. from Bricks Productivity) style every
   .bricks-button with a primary background at the same specificity as
   the rule above, and load later, so they'd win. Repeat the colour
   properties with one extra class so our colour classes always apply.
   Outline / ghost / link rules below have equal specificity and come
   later, so they still override this. */
.bricks-button:is(
  .btn--primary,
  .btn--secondary,
  .btn--tertiary,
  .btn--base,
  .btn--dark,
  .btn--light
) {
  background-color: var(--btn-color);
  border: var(--btn-border-width) solid var(--btn-color);
  color: var(--btn-contrast);
  transition:
    background-color var(--btn-speed) var(--btn-easing),
    border-color var(--btn-speed) var(--btn-easing),
    color var(--btn-speed) var(--btn-easing),
    transform var(--btn-speed) var(--btn-easing);
}

/* ==========================================================
   4. SOLID BUTTONS

   Default appearance.
   No extra class required.

   Hover darkens the background.

========================================================== */

.bricks-button:is(
  .btn--primary,
  .btn--secondary,
  .btn--tertiary,
  .btn--base,
  .btn--dark,
  .btn--light
):not(.btn--outline):not(.btn--ghost):not(.btn--link):hover {
  background-color: var(--btn-hover);
  border-color: var(--btn-hover);
  color: var(--btn-contrast);
}


/* ==========================================================
   5. OUTLINE BUTTONS

   Transparent background.
   Coloured text and border.

   Hover fills with brand colour.

========================================================== */

:is(
  .btn--primary,
  .btn--secondary,
  .btn--tertiary,
  .btn--base,
  .btn--dark,
  .btn--light
).btn--outline {

  background-color: transparent;
  border-color: var(--btn-outline-color);
  color: var(--btn-outline-color);

}

:is(
  .btn--primary,
  .btn--secondary,
  .btn--tertiary,
  .btn--base,
  .btn--dark,
  .btn--light
).btn--outline:hover {

  background-color: var(--btn-color);
  border-color: var(--btn-color);
  color: var(--btn-contrast);

}


/* ==========================================================
   6. GHOST BUTTONS

   No visible background or border.

   Hover adds a subtle tinted background.

========================================================== */

:is(
  .btn--primary,
  .btn--secondary,
  .btn--tertiary,
  .btn--base,
  .btn--dark,
  .btn--light
).btn--ghost {

  background-color: transparent;
  border-color: transparent;
  color: var(--btn-outline-color);

}

:is(
  .btn--primary,
  .btn--secondary,
  .btn--tertiary,
  .btn--base,
  .btn--dark,
  .btn--light
).btn--ghost:hover {

  background-color: var(--btn-ghost-hover);
  border-color: transparent;
  color: var(--btn-outline-color);

}



/* ==========================================
   7. REFINED LINK BUTTONS
========================================== */

:is(
  .btn--primary,
  .btn--secondary,
  .btn--tertiary,
  .btn--base,
  .btn--dark,
  .btn--light
).btn--link {
  background: transparent;
  border: 0;
  padding: 0;

  color: var(--btn-outline-color);
  text-decoration: none;

  width: fit-content;
  gap: 0.4em;
  line-height: 1.4;
}

/* Hover */

:is(
  .btn--primary,
  .btn--secondary,
  .btn--tertiary,
  .btn--base,
  .btn--dark,
  .btn--light
).btn--link:hover {
  background: transparent;
  border: 0;

  color: var(--btn-outline-hover);
  text-decoration: none;
}

/* Prevent arrow decoration */

.btn--link::after {
  text-decoration: none;
}


/* ==========================================================
   8. OPTIONAL ARROWS

   CSS-generated decorative arrows.

   Works with all colours and appearances.

========================================================== */

:is(
  .btn--arrow-right,
  .btn--arrow-up-right
) {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: var(--btn-arrow-gap);

}

:is(
  .btn--arrow-right,
  .btn--arrow-up-right
)::after {

  display: inline-block;
  flex-shrink: 0;

  font-family: Arial, sans-serif;
  font-size: var(--btn-arrow-size);
  font-weight: 400;
  line-height: 1;

  transition:
    transform var(--btn-speed) var(--btn-easing);

}


/* Right arrow */

.btn--arrow-right::after {
  content: "\2192";
}

.btn--arrow-right:hover::after {
  transform:
    translateX(var(--btn-arrow-distance));
}


/* Up-right arrow */

.btn--arrow-up-right::after {
  content: "\2197";
}

.btn--arrow-up-right:hover::after {
  transform:
    translate(
      var(--btn-arrow-distance),
      calc(var(--btn-arrow-distance) * -1)
    );
}


/* ==========================================================
   9. OPTIONAL HOVER TRANSFORMS

   No movement by default.

   Add .btn--lift OR .btn--scale.

========================================================== */


/* Lift */

.btn--lift:hover {
  transform: translateY(var(--btn-lift));
}


/* Scale */

.btn--scale:hover {
  transform: scale(var(--btn-scale));
}


/* ==========================================================
   10. KEYBOARD FOCUS

   Visible focus indicator for accessibility.

========================================================== */

:is(
  .btn--primary,
  .btn--secondary,
  .btn--tertiary,
  .btn--base,
  .btn--dark,
  .btn--light
):focus-visible {

  outline: 3px solid var(--btn-outline-color);
  outline-offset: 4px;

}


/* ==========================================================
   11. DISABLED STATES
========================================================== */

:is(
  .btn--primary,
  .btn--secondary,
  .btn--tertiary,
  .btn--base,
  .btn--dark,
  .btn--light
):is(
  :disabled,
  [aria-disabled="true"]
) {

  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;

}


/* ==========================================================
   12. REDUCED MOTION

   Respects user accessibility preferences.

========================================================== */

@media (prefers-reduced-motion: reduce) {

  :is(
    .btn--primary,
    .btn--secondary,
    .btn--tertiary,
    .btn--base,
    .btn--dark,
    .btn--light
  ) {

    transition: none;

  }

  :is(
    .btn--arrow-right,
    .btn--arrow-up-right
  )::after {

    transition: none;

  }

  .btn--lift:hover,
  .btn--scale:hover {

    transform: none;

  }

  .btn--arrow-right:hover::after,
  .btn--arrow-up-right:hover::after {

    transform: none;

  }

}

/* ==========================================
   BUTTON SIZING
========================================== */

/* Small */
.bricks-button.sm {
  padding: 8px 16px;
}

/* Medium */
.bricks-button.md {
  padding: 12px 24px;
}

/* Large */
.bricks-button.lg {
  padding: 16px 32px;
}

/* Extra Large */
.bricks-button.xl {
  padding: 20px 40px;
}

/* Optional full-width buttons on mobile */

@media (max-width: 767px) {
  .bricks-button.btn--mobile-full {
    width: 100%;
    display: inline-flex;
    justify-content: center;
  }
}


/* ==========================================================
   13. WS FORM INTEGRATION

   Targets the actual .wsf-button markup.
   Crucially, does NOT turn every WS Form button blue.
   WS Form Base/Success/Information/Warning/Danger retain
   their own Styler colours. Primary/Secondary use blueprint
   colour tokens. Custom btn--* classes override variants.

   If using WS Form Styler, set its Base/other colour fields
   there; use shared --btn-* variables for typography/sizing.
========================================================== */

/* Shared sizing only — applies to every WS Form button. */
:is(button.wsf-button, input.wsf-button) {
  box-sizing: border-box;
  font-family: var(--btn-font-family) !important;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;
  line-height: var(--btn-line-height) !important;
  padding: var(--xbtn-padding-block) var(--xbtn-padding-inline) !important;
  border-radius: var(--btn-radius) !important;
  max-width: 100%;
  cursor: pointer;
  transition:
    background-color var(--btn-speed) var(--btn-easing),
    border-color var(--btn-speed) var(--btn-easing),
    color var(--btn-speed) var(--btn-easing),
    transform var(--btn-speed) var(--btn-easing);
}

/* Only WS Form's actual Primary and Secondary variants get
   automatic blueprint colours. Other Styler variants stay intact. */
:is(button.wsf-button, input.wsf-button).wsf-button-primary:not(:is(.btn--primary,.btn--secondary,.btn--tertiary,.btn--base,.btn--dark,.btn--light)) {
  --btn-color: var(--primary);
  --btn-hover: var(--primary-d-1);
  --btn-contrast: var(--btn-on-primary);
  background-color: var(--btn-color) !important;
  border-color: var(--btn-color) !important;
  color: var(--btn-contrast) !important;
}
:is(button.wsf-button, input.wsf-button).wsf-button-primary:not(:is(.btn--primary,.btn--secondary,.btn--tertiary,.btn--base,.btn--dark,.btn--light)):hover {
  background-color: var(--btn-hover) !important;
  border-color: var(--btn-hover) !important;
  color: var(--btn-contrast) !important;
}

:is(button.wsf-button, input.wsf-button).wsf-button-secondary:not(:is(.btn--primary,.btn--secondary,.btn--tertiary,.btn--base,.btn--dark,.btn--light)) {
  --btn-color: var(--secondary);
  --btn-hover: var(--secondary-d-1);
  --btn-contrast: var(--btn-on-secondary);
  background-color: var(--btn-color) !important;
  border-color: var(--btn-color) !important;
  color: var(--btn-contrast) !important;
}
:is(button.wsf-button, input.wsf-button).wsf-button-secondary:not(:is(.btn--primary,.btn--secondary,.btn--tertiary,.btn--base,.btn--dark,.btn--light)):hover {
  background-color: var(--btn-hover) !important;
  border-color: var(--btn-hover) !important;
  color: var(--btn-contrast) !important;
}

/* Explicit blueprint colour classes work on any WS Form
   variant, regardless of its original WS Form colour. */
:is(button.wsf-button, input.wsf-button):is(.btn--primary,.btn--secondary,.btn--tertiary,.btn--base,.btn--dark,.btn--light) {
  background-color: var(--btn-color) !important;
  border: var(--btn-border-width) solid var(--btn-color) !important;
  color: var(--btn-contrast) !important;
}
:is(button.wsf-button, input.wsf-button):is(.btn--primary,.btn--secondary,.btn--tertiary,.btn--base,.btn--dark,.btn--light):not(.btn--outline):not(.btn--ghost):not(.btn--link):hover {
  background-color: var(--btn-hover) !important;
  border-color: var(--btn-hover) !important;
  color: var(--btn-contrast) !important;
}

/* Appearance modifiers for explicit blueprint colour classes. */
:is(button.wsf-button, input.wsf-button):is(.btn--primary,.btn--secondary,.btn--tertiary,.btn--base,.btn--dark,.btn--light).btn--outline {
  background-color: transparent !important;
  border-color: var(--btn-outline-color) !important;
  color: var(--btn-outline-color) !important;
}
:is(button.wsf-button, input.wsf-button):is(.btn--primary,.btn--secondary,.btn--tertiary,.btn--base,.btn--dark,.btn--light).btn--outline:hover {
  background-color: var(--btn-color) !important;
  border-color: var(--btn-color) !important;
  color: var(--btn-contrast) !important;
}
:is(button.wsf-button, input.wsf-button):is(.btn--primary,.btn--secondary,.btn--tertiary,.btn--base,.btn--dark,.btn--light).btn--ghost {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--btn-outline-color) !important;
}
:is(button.wsf-button, input.wsf-button):is(.btn--primary,.btn--secondary,.btn--tertiary,.btn--base,.btn--dark,.btn--light).btn--ghost:hover {
  background-color: var(--btn-ghost-hover) !important;
  border-color: transparent !important;
  color: var(--btn-outline-color) !important;
}
:is(button.wsf-button, input.wsf-button):is(.btn--primary,.btn--secondary,.btn--tertiary,.btn--base,.btn--dark,.btn--light).btn--link {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--btn-outline-color) !important;
  width: fit-content;
  text-decoration: none;
}
:is(button.wsf-button, input.wsf-button):is(.btn--primary,.btn--secondary,.btn--tertiary,.btn--base,.btn--dark,.btn--light).btn--link:hover {
  background-color: transparent !important;
  color: var(--btn-outline-hover) !important;
}

/* Preserve WS Form's full-width setting; optional mobile full. */
@media (max-width: 767px) {
  :is(button.wsf-button, input.wsf-button).btn--mobile-full {
    width: 100% !important;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(button.wsf-button, input.wsf-button) { transition: none; }
}