/**
 * Button Component Styles
 *
 * Styles:   primary | secondary | outline
 * Sizes:    container-responsive: small (44px) | medium (56px) | large (64px)
 * Size prop: optional maximum size: s | m | l
 * Contexts: trust | ambience | white | academy | attitude
 *
 * Figma node: 694:30391 (Buttons Preview)
 */

/* -------------------------------------------------------
 * Component-scoped custom properties (defaults = primary small on trust)
 * ------------------------------------------------------- */
.button {
  --btn-height:    44px;
  --btn-font:      var(--text-size-button-button-text-s, 18px);
  --btn-tracking:  -0.18px;
  --btn-px:        var(--spacing-300, 24px);
  --btn-icon-size: 16px;
  --btn-icon-stroke-width: 2.8px;
  --btn-gap:       var(--spacing-150, 12px);
  --btn-px-icon:   var(--spacing-250, 20px);

  --btn-bg:        var(--attitude, #ffa0fa);
  --btn-text:      var(--trust, #550a2d);
  --btn-border:    transparent;

}

.button__container {
  container: bosch-button / inline-size;
  inline-size: 100%;
}

.container .button__container {
  padding-block: var(--spacing-500, 40px);
}

/* -------------------------------------------------------
 * Base element styles
 * ------------------------------------------------------- */
.button {
  align-items: center;
  background-color: var(--btn-bg);
  border: var(--border-width-regular, 2px) solid var(--btn-border);
  border-radius: var(--border-radius-round, 1000px);
  color: var(--btn-text);
  cursor: pointer;
  display: inline-flex;
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-size: var(--btn-font);
  font-weight: 700;
  gap: var(--btn-gap);
  height: var(--btn-height);
  width: fit-content;
  justify-content: center;
  letter-spacing: var(--btn-tracking);
  line-height: 1.1;
  margin-inline: 1em;
  padding: 2px var(--btn-px);
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}

.button:first-child {
  margin-left: 0;
}

@supports (text-box-trim: trim-both) {
  .button {
    padding-bottom: 0;
  }
  .button .button__label {
    order: 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.button:focus-visible {
  outline: var(--border-width-bold, 4px) solid var(--accent, #fa263a);
  outline-offset: 2px;
}

/* -------------------------------------------------------
 * CONTAINER-RESPONSIVE SIZE VARIANTS
 * ------------------------------------------------------- */
@container bosch-button (min-width: 360px) {
  .button:not(.button--max-s) {
    --btn-height:    56px;
    --btn-font:      var(--text-size-button-button-text-m, 22px);
    --btn-tracking:  -0.264px;
    --btn-px:        var(--spacing-400, 32px);
    --btn-icon-size: 20px;
    --btn-icon-stroke-width: 3.5px;
    --btn-gap:       var(--spacing-200, 16px);

    /* M icon-side padding reduction (icon side gets less padding) */
    --btn-px-icon:   var(--spacing-350, 28px);
  }
}

@container bosch-button (min-width: 720px) {
  .button:not(.button--max-s):not(.button--max-m) {
    --btn-height:    64px;
    --btn-font:      var(--text-size-button-button-text-l, 28px);
    --btn-tracking:  -0.42px;
    --btn-px:        var(--spacing-500, 40px);
    --btn-icon-size: 26px;
    --btn-icon-stroke-width: 5px;
    --btn-gap:       var(--spacing-250, 20px);
    --btn-px-icon:   var(--spacing-400, 32px);
  }
}

/* -------------------------------------------------------
 * ICON POSITION VARIANTS
 * ------------------------------------------------------- */

.button__icon {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: var(--btn-icon-size);
  justify-content: center;
  width: var(--btn-icon-size);
  transition: margin 0.3s ease-in-out;
}

.button__icon svg {
  display: block;
  height: 100%;
  width: 100%;
  stroke-width: var(--btn-icon-stroke-width);
}

/* Override icon component's own fixed size so it scales with the button */
.button__icon .icon {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}

.button__icon.before {
  order: -1;
}

.button:hover .button__icon.before {
  margin-inline-end: 0.25rem;
}

.button__icon.after {
  order: 1;
}

.button:hover .button__icon.after {
  margin-inline-start: 0.25rem;
}

.button.icon--only {
  width: var(--btn-height);
  padding: 0;
}

/* -------------------------------------------------------
 * STYLE VARIANTS (primary / secondary / outline)
 * Colors depend on context — see below.
 * ------------------------------------------------------- */

/* Primary */

.button--primary {
  --btn-bg:        var(--attitude, #ffa0fa);
  --btn-text:      var(--trust, #550a2d);
}

.button--primary:hover {
  --btn-bg: var(--attitude-500, #cc80c8);
}

.surface--attitude .button--primary,
.button--primary.button--on-attitude
{
  --btn-bg:   var(--white, #ffffff);
  --btn-text: var(--trust, #550a2d);
}
.surface--attitude .button--primary:hover,
.button--primary.button--on-attitude:hover
{
  --btn-bg: var(--attitude-100, #FFCFFD);
}

.surface--attitude .button--primary:hover,
.button--primary.button--on-attitude:hover {
  --btn-bg: var(--attitude-200, #FFCFFD);
}

.surface--academy .button--primary,
.button--primary.button--on-academy {
  --btn-bg:        var(--trust, #550a2d);
  --btn-text:        var(--attitude, #ffa0fa);
}

.surface--academy .button--primary:hover,
.button--primary.button--on-academy:hover {
  --btn-bg:        var(--trust-300, #773B57);
}

/* on media only one button-style is allowed! */
.media .button--primary,
.media .button--secondary,
.media .button--outline,
.button--primary.button--on-media,
.button--secondary.button--on-media,
.button--outline.button--on-media
{
  --btn-bg:        #EBE6E1A8; /* we need the opacity in the color definition for the backdrop-filter to work*/
  --btn-text:        var(--trust, #550a2d);
  --btn-border:     none;
  backdrop-filter: blur(calc(var(--blur-medium, 12px) / 2));
}

.media .button--primary:hover,
.media .button--secondary:hover,
.media .button--outline:hover,
.button--primary.button--on-media:hover,
.button--secondary.button--on-media:hover,
.button--outline.button--on-media:hover
{
  --btn-bg:        var(--attitude, #ffa0fa);
  --btn-border:     none;
  background-color: var(--btn-bg);
}



/* Secondary */
.button--secondary {
  --btn-bg:   var(--ambience, #EBE6E1);
  --btn-text: var(--trust, #550a2d);
}

.button--secondary:hover {
  --btn-bg: var(--ambience-500, #DBD4CE);
}

.surface--ambience .button--secondary,
.button--secondary.button--on-ambience {
  --btn-bg:   var(--ambience-500, #DBD4CE);
  --btn-text: var(--trust, #550a2d);
}
.surface--ambience .button--secondary:hover,
.button--secondary.button--on-ambience:hover {
  --btn-bg: var(--ambience-600, #BAB0A7);
}

.surface--attitude .button--secondary,
.button--secondary.button--on-attitude {
  --btn-bg:   var(--attitude-500, #cc80c8);
  --btn-text: var(--white, #ffffff);
}
.surface--attitude .button--secondary:hover,
.button--secondary.button--on-attitude:hover {
  --btn-bg: var(--attitude-600, #996096);
}

.surface--trust .button--secondary,
.button--secondary.button--on-trust {
  --btn-bg:   var(--trust-300, #773b57);
  --btn-text: var(--white, #ffffff);
}
.surface--trust .button--secondary:hover,
.button--secondary.button--on-trust:hover {
  --btn-bg: var(--trust-200, #AA8496);
}

.surface--academy .button--secondary,
.surface--academy .button--secondary:hover,
.button--secondary.button--on-academy,
.button--secondary.button--on-academy:hover
{
  --btn-bg: var(--academy-200, #D4C0A1);
}
.surface--attitude .button--secondary:hover,
.button--secondary.button--on-attitude:hover
{
  --btn-bg: var(--attitude-600, #996096);
}



/* Outline */
.button--outline {
  --btn-bg:     transparent;
  --btn-border: var(--trust, #550a2d);
  --btn-text:   var(--trust, #550a2d);
}

/* Outline hover: tinted fill using border color */
.button--outline:hover {
  --btn-bg:     var(--ambience, #ebe6e1);
}

.surface--ambience .button--outline:hover,
.button--outline.button--on-ambience:hover
{
  --btn-bg:     var(--ambience-500, #dbd4ce);
}

.surface--attitude .button--outline:hover,
.button--outline.button--on-attitude:hover {
  --btn-bg:     var(--attitude-300, #FFB3FB);
}

.surface--trust .button--outline,
.button--outline.button--on-trust{
  --btn-border: var(--white, #ffffff);
  --btn-text:   var(--white, #ffffff);
}
.surface--trust .button--outline:hover,
.button--outline.button--on-trust:hover {
  --btn-bg:     var(--trust-300, #773B57);
}

.surface--academy .button--outline,
.button--outline.button--on-academy {
  --btn-border: var(--white, #ffffff);
  --btn-text:   var(--white, #ffffff);
}
.surface--academy .button--outline:hover,
.button--outline.button--on-academy:hover {
  --btn-bg:     var(--academy-500, #97784B);
}