/* @todo outlines on focus/active */
:root {
  --g-button-padding-vertical-top: 0.125rem;
  --g-button-padding-vertical-bottom: 0.25rem;
  --g-button-padding-horizontal: 1.5rem;
  --g-button-margin-top: 0.5rem;
  --g-button-min-height: 2rem;
}

.page-front,
.section-back-top {
  --g-button-margin-top: 0px;
}
/** Styles to implement
  Filled
  White
  Outline
  Tonal
 **/

/** @todo the hh module links should use a theme button class only **/
#hero-header .link-container a.button-hero-header,
.g-button,
button.g-button,
body .webform-confirmation-modal--content .main-action.javali-buttons,
body #main-content .main-action.javali-buttons,
#main-content .secondary-button,
.givaudan-webform-modal.ui-dialog .ui-dialog-buttonpane button,
.page-node-type-webform .webform-button--submit,
.givaudan-webform-preview .webform-button--submit,
body a.download {
  box-sizing: border-box;
  display: inline-flex;
  min-height: var(--g-button-min-height, 2rem);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--corner-extra-small);
  text-decoration: none;
  padding: var(--g-button-padding-vertical-top) var(--g-button-padding-horizontal) var(--g-button-padding-vertical-bottom);
  position: relative;
  font-family: var(--text-font);
  font-size: var(--font-body-medium);
  line-height: var(--line-height-medium);
  margin-bottom: 0.5rem;
  cursor: pointer;
  margin-top: var(--g-button-margin-top, 0px);
}

.g-button.small {
  --g-button-min-height: 1.5rem;
  --g-button-padding-vertical-top: 0px;
  --g-button-padding-vertical-bottom: 1px;
  --g-button-padding-horizontal: 0.75rem;
  font-size: var(--font-body-medium);
  line-height: 1;
}

/** @todo the hh module links should use a theme button class only **/
.g-button.large,
#hero-header .link-container a.button-hero-header,
body .webform-confirmation-modal--content .main-action.javali-buttons,
body #main-content .main-action.javali-buttons,
#main-content .secondary-button,
body a.download {
  --g-button-min-height: 2.5rem;
  --g-button-padding-vertical-top: 5px;
  --g-button-padding-vertical-bottom: 7px;
  --g-button-padding-horizontal: 1.5rem;
}

/** 
** STYLES 
**/
/** @todo focus, disabled and loading */

/* Filled */
.g-button-filled,
.g-button.colour,
a.colour.main-action.javali-buttons,
#main-content a.colour.main-action.javali-buttons,
.givaudan-webform-modal.ui-dialog .ui-dialog-buttonpane button,
.page-node-type-webform .webform-button--submit,
.givaudan-webform-preview .webform-button--submit,
body #main-content .main-action.webform-dialog.javali-buttons.sb-link,
.careers-cta-container .primary-button {
  background-color: var(--color-700, #222222);
  color: #fff;
  border: 1px solid var(--color-700, #000);
}

.g-button.g-button-filled.addeventatc {
  background-color: var(--color-700, #222222);
  color: #fff !important;
  font-weight: 400;
}

/* White */
/** @todo the hh module links should use a theme button class only **/
#hero-header .link-container a.button-hero-header,
.g-button-white,
button.g-button-white,
.node--type-horizontal-story .g-button-white.hs-explore {
  background-color: #fff;
  color: var(--color-functional-black, #000);
}

/* Outline */
.g-button-outline,
.secondary-button,
button.g-button-outline,
body .webform-confirmation-modal--content .main-action.javali-buttons,
body #main-content .main-action.javali-buttons,
#main-content .secondary-button,
#main-content .related-items a {
  background-color: #fff;
  color: var(--color-functional-black, #000);
  border: 1px solid var(--color-functional-700, #000);
}

/* Tonal */
.g-button-tonal,
body a.download {
  background-color: var(--color-50, --color-functional-50);
  color: var(--color-700, --color-functional-700);
}

/** END STYLES **/

/** WITH ICON **/
.g-button-icon,
body a.download,
button.g-button-icon {
  gap: 0.5rem;
  display: inline-flex;
  flex-direction: row;
  line-height: 1;
  padding-left: 3.125rem;
}

.g-button-icon::before,
body a.download::before,
button.g-button-icon::before {
  content: attr(data-icon);
  font-family: "Material Symbols Outlined";
  font-size: 1.125rem;
  position: absolute;
  left: var(--g-button-padding-horizontal);
  top: 0;
  bottom: 0;
  margin: auto;
  height: 1.125rem;
  line-height: 1;
}

.small.g-button-icon {
  padding-left: 2.25rem;
}

.small.g-button-icon::before {
  font-size: var(--font-body-large);
  height: var(--font-body-large);
}

/* @todo change in html add data-icon="[icon_name]" */
.g-button-icon.arrow-right-alt::before {
  content: "arrow_right_alt";
}

.g-button-icon.arrow-upward::before {
  content: "arrow_upward";
}

body a.download .download-icon {
  display: none;
}

body a.download::before {
  content: "download";
}

/** END WITH ICON **/

/** BEHAVIOURS (hover and focus) **/

.g-button.colour:hover,
.givaudan-webform-modal.ui-dialog .ui-dialog-buttonpane button:hover,
.page-node-type-webform .webform-button--submit:hover,
.givaudan-webform-preview .webform-button--submit:hover,
.careers-cta-container .primary-button:hover,
a.colour.main-action.javali-buttons {
  background-color: var(--color-500, #222222);
  text-decoration: none;
}

a.g-button-filled:hover,
a.g-button-filled:focus {
  text-decoration: none;
}

.g-button-filled:hover,
.g-button.colour:hover,
#main-content a.colour.main-action.javali-buttons:hover,
a.colour.main-action.javali-buttons:hover,
.g-button.g-button-filled.addeventatc:hover,
.g-button-filled:focus,
.g-button.colour:focus,
#main-content a.colour.main-action.javali-buttons:focus,
a.colour.main-action.javali-buttons:focus,
.g-button.g-button-filled.addeventatc:focus,
body #main-content .main-action.webform-dialog.javali-buttons.sb-link:focus,
body #main-content .main-action.webform-dialog.javali-buttons.sb-link:hover,
.careers-cta-container .primary-button:hover:hover,
.careers-cta-container .primary-button:hover:focus {
  background-color: var(--color-500);
}

#hero-header a.button-hero-header:hover,
.g-button-white:hover,
.g-button-outline:hover,
.g-button.secondary-button:hover,
body .webform-confirmation-modal--content .main-action.javali-buttons:not(.colour):hover,
body #main-content .main-action.javali-buttons:not(.colour):hover,
#main-content .secondary-button:hover,
.node--type-horizontal-story .g-button-white.hs-explore:hover,
#hero-header a.button-hero-header:focus,
.g-button-white:focus,
.g-button-outline:focus,
.g-button.secondary-button:focus,
body .webform-confirmation-modal--content .main-action.javali-buttons:not(.colour):focus,
body #main-content .main-action.javali-buttons:not(.colour):focus,
#main-content .secondary-button:focus,
.node--type-horizontal-story .g-button-white.hs-explore:focus {
  background-color: var(--color-functional-white, #faf9f6);
  text-decoration: none;
}

.g-button-tonal:hover,
body a.download:hover,
.g-button-tonal:focus,
body a.download:focus {
  background-color: var(--color-300, --color-functional-300);
  text-decoration: none;
}

.g-button.addeventatc:hover,
.g-button.addeventatc:focus {
  font-size: var(--font-body-medium);
}

.g-button.colour:focus,
.givaudan-webform-modal.ui-dialog .ui-dialog-buttonpane button:focus,
.page-node-type-webform .webform-button--submit:focus,
.givaudan-webform-preview .webform-button--submit:focus,
.g-button:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-500);
  outline: none;
}

.g-button.colour:focus:not(:focus-visible),
.givaudan-webform-modal.ui-dialog .ui-dialog-buttonpane button:focus:not(:focus-visible),
.page-node-type-webform .webform-button--submit:focus:not(:focus-visible),
.givaudan-webform-preview .webform-button--submit:focus:not(:focus-visible),
.g-button:focus:not(:focus-visible),
body #main-content .sb-link:focus:not(:focus-visible),
.careers-cta-container .primary-button:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

.g-button.addeventatc:focus {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-500) !important;
  outline: none;
}

/** END BEHAVIOURS **/

/** DESKTOP AND OVER **/
@media screen and (min-width: 1120px) {
}
/** END DESKTOP AND OVER **/

/** WIDE AND OVER **/
@media screen and (min-width: 1921px) {
  :root {
    --g-button-padding-vertical-top: 0.2rem;
    --g-button-padding-vertical-bottom: 0.375rem;
    --g-button-padding-horizontal: 2.25rem;
    --g-button-margin-top: 0.75rem;
    --g-button-min-height: 3rem;
  }

  .g-button.small {
    --g-button-min-height: 2.25rem;
    --g-button-padding-vertical-top: 0.5px;
    --g-button-padding-vertical-bottom: 1.5px;
    --g-button-padding-horizontal: 1.25rem;
    font-size: var(--font-body-medium);
    line-height: 1;
  }

  .g-button.large,
  #hero-header .link-container a.button-hero-header,
  body .webform-confirmation-modal--content .main-action.javali-buttons,
  body #main-content .main-action.javali-buttons,
  #main-content .secondary-button,
  body a.download {
    --g-button-min-height: 3.75rem;
    --g-button-padding-vertical-top: 7.5px;
    --g-button-padding-vertical-bottom: 10.5px;
    --g-button-padding-horizontal: 2.25rem;
  }

  .g-button-icon,
  body a.download,
  button.g-button-icon {
    gap: 0.75rem;
    padding-left: 4.6875rem;
  }

  .g-button-icon::before,
  body a.download::before,
  button.g-button-icon::before {
    font-size: 1.6875rem;
    height: 1.6875rem;
  }

  .small.g-button-icon,
  .small.button.g-button-icon {
    padding-left: 3.375rem;
  }
}
/** END WIDE AND OVER **/

/** 4k **/
@media screen and (min-width: 3441px) {
  :root {
    --g-button-padding-vertical-top: 0.3rem;
    --g-button-padding-vertical-bottom: 0.5625rem;
    --g-button-padding-horizontal: 3.375rem;
    --g-button-margin-top: 1.125rem;
    --g-button-min-height: 4.5rem;
  }

  .g-button.small {
    --g-button-min-height: 3.375rem;
    --g-button-padding-vertical-top: 0.75px;
    --g-button-padding-vertical-bottom: 2.25px;
    --g-button-padding-horizontal: 1.875rem;
    font-size: var(--font-body-medium);
    line-height: 1;
  }

  .g-button.large,
  #hero-header .link-container a.button-hero-header,
  body .webform-confirmation-modal--content .main-action.javali-buttons,
  body #main-content .main-action.javali-buttons,
  #main-content .secondary-button,
  body a.download {
    --g-button-min-height: 5.625rem;
    --g-button-padding-vertical-top: 11.25px;
    --g-button-padding-vertical-bottom: 15.75px;
    --g-button-padding-horizontal: 3.375rem;
  }

  .g-button-icon,
  body a.download,
  button.g-button-icon {
    gap: 1.125rem;
    padding-left: 7rem;
  }

  .g-button-icon::before,
  body a.download::before,
  button.g-button-icon::before {
    font-size: 2.5rem;
    height: 2.5rem;
  }

  .small.g-button-icon,
  .small.button.g-button-icon {
    padding-left: 5rem;
  }
}
/** END 4k **/