/** --------------------------------------------------- **/
/** ///////////////////// BUTTONS ///////////////////// **/
/** --------------------------------------------------- **/

/* button wrapper */
.buttons {
  display: flex;
  flex-direction: row;
  gap: var(--inline__M);
  justify-content: flex-start;
}

/* button link */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.44444444rem;
  border-radius: 2px;
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: var(--font__family__body);
  font-size: var(--font__size__14);
  font-style: normal;
  font-weight: bold;
  line-height: var(--font__lineheight__14);
  letter-spacing: var(--font__letterspacing__XXS);
  text-decoration: none;
  position: relative;
  height: 40px;
  transition: all 0.3s ease-in-out;
  white-space: nowrap;
}

.button:hover {
  background:#83240d;
}

/* TERTIARY - buttons */
.tert-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--inset__XS);
  height: 24px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.3px;
  width: fit-content;
  transition: all 0.3s ease-in-out;
}

/** ------------------------------------------------- **/
/** //// ON white BACKGROUND //// **/
/** ------------------------------------------------- **/

/* PRIMARY - default - on white */
.btn-primary {
  background: var(--color__secondary__color500);
  color: var(--color__functional__white, var(--color__functional__white));
  width: stretch;
  box-shadow: inset 0 0 0 3px var(--color__secondary__color500),inset 0 0 0 4px rgba(243, 232, 210, .5);
  padding-top: var(--inset__none);
  padding-right: var(--inset__S);
  padding-bottom: var(--inset__none);
  padding-left: var(--inset__S);
}

/* PRIMARY - hover - on white */
.btn-primary:hover {
  background: #83240d;
  color: var(--color__functional__white, var(--color__functional__white));
  text-decoration: none;
  box-shadow: inset 0 0 0 3px #83240d,inset 0 0 0 4px rgba(243, 232, 210, .5);
}

/* PRIMARY - focus - on white */
.btn-primary:focus {
  background: var(--color__primary__color1);
  color: var(--color__functional__white, var(--color__primary__color1));
  box-shadow: 0px 0px 0px 1px var(--color__primary__color1), 0px 0px 0px 4px var(--color__primary__color1);
  border: none;
  outline: none;
}

/* PRIMARY - disabled - on white */
.btn-primary:disabled {
  background: var(--color__functional__grey300);
  color: var(--color__functional__grey900, var(--color__functional__grey900));
  outline-color: var(--color__functional__grey900);
  outline-style: solid;
  outline-width: var(--borders__stroke__S);
  outline-offset: -1px;
}

/* SECONDARY - default - on white */
.btn-secondary {
  color: var(--primary-color-2, var(--color__primary__color1));
  outline-color: var(--color__primary__color1);
  outline-style: solid;
  outline-width: var(--borders__stroke__S);
  outline-offset: -1px;
  background: transparent;
  border: none;
}

/* SECONDARY - hover - on white */
.btn-secondary:hover {
  background: var(--color__primary__color1);
  color: var(--color__functional__white, var(--color__functional__white));
  outline-color: var(--color__primary__color1);
  outline-style: solid;
  outline-width: var(--borders__stroke__S);
  outline-offset: -1px;
}

/* SECONDARY - focus - on white */
.btn-secondary:focus {
  background: var(--color__primary__color1);
  color: var(--color__functional__white, var(--color__functional__white, #FFFFFF));
  box-shadow: 0px 0px 0px 2px var(--color__functional__white, #FFFFFF), 0px 0px 0px 3px var(--color__primary__color1);
}

/* SECONDARY - disabled - on white */
.btn-secondary:disabled {
  background: var(--color__functional__grey300, #F1F3F2);
  color: var(--color__functional__grey900, var(--color__functional__grey900, #4A5955));
  outline-color: var(--color__functional__grey900);
  outline-style: solid;
  outline-width: var(--borders__stroke__S);
  outline-offset: -1px;
}

 /* TERTIARY - default - on white */
.btn-tertiary {
  color: var(--color__primary__color2, var(--color__primary__color2, #2D810E));
}

/* TERTIARY - hover - on white */
.btn-tertiary:hover {
  color: var(--color__primary__color1, var(--color__primary__color1, #004A2E));
}

/* TERTIARY - focus - on white */
.btn-tertiary:focus {
  box-shadow: 0px 0px 0px 2px var(--color__functional__white, #FFFFFF), 0px 0px 0px 4px var(--color__primary__color2, #2D810E);
}

/* TERTIARY - disabled - on white */
.btn-tertiary-disabled {
  color: var(--color__functional__grey900, var(--color__functional__grey900, #4A5955));
  pointer-events: none;
}

/* TEXT LINK - default - on white */
.btn-textlink {
  color: var(--color__primary__color2, var(--color__primary__color2, #2D810E));
}

/** ------------------------------------------------- **/
/** //// ON GREEN BACKGROUND //// **/
/** ------------------------------------------------- **/

/* PRIMARY - default - on green */
.btn-primary-greenbg {
  background: var(--color__functional__white, #FFFFFF);
  color: var(--color__primary__color1, var(--color__primary__color1, #004A2E));
}

/* PRIMARY - hover - on green */
.btn-primary-greenbg:hover {
  background: var(--color__primary__color1, #004A2E);
  color: var(--color__functional__white, var(--color__functional__white, #FFFFFF));
}

/* PRIMARY - focus - on green */
.btn-primary-greenbg:focus {
  background: var(--color__functional__white, #FFFFFF);
  color: var(--color__primary__color1, var(--color__primary__color1, #004A2E));
  box-shadow: 0px 0px 0px 1px var(--color__primary__color2, #2D810E);
  border: none;
  outline-color: var(--color__functional__white);
  outline-style: solid;
  outline-width: var(--borders__stroke__M);
  outline-offset: 1px;
}

/* PRIMARY - disabled - on green */
.btn-primary-greenbg:disabled {
  background: var(--color__functional__grey300, #F1F3F2);
  color: var(--color__functional__grey900, var(--color__functional__grey900, #4A5955));
  outline-color: var(--color__functional__grey900);
  outline-style: solid;
  outline-width: var(--borders__stroke__S);
  outline-offset: -1px;
}

/* SECONDARY - default - on green */
.btn-secondary-greenbg {
  color: var(--color__functional__white, var(--color__functional__white, #FFFFFF));
  outline-color: var(--color__functional__white);
  outline-style: solid;
  outline-width: var(--borders__stroke__S);
  outline-offset: -1px;
}

/* SECONDARY - hover - on green */
.btn-secondary-greenbg:hover {
  background: var(--color__functional__white, #FFFFFF);
  color: var(--color__primary__color1, var(--color__primary__color1, #004A2E));
}

/* SECONDARY - focus - on green */
.btn-secondary-greenbg:focus {
  background: var(--color__functional__white, #FFFFFF);
  color: var(--color__primary__color1, var(--color__primary__color1, #004A2E));
  box-shadow: 0px 0px 0px 2px var(--color__primary__color2, #2D810E), 0px 0px 0px 3px var(--color__functional__white, #FFFFFF);
}

/* SECONDARY - disabled - on green */
.btn-secondary-greenbg:disabled {
  background: var(--color__functional__grey500, #C2CAC8);
  color: var(--color__functional__grey900, var(--color__functional__grey900, #4A5955));
  outline-color: var(--color__functional__grey500);
  outline-style: solid;
  outline-width: var(--borders__stroke__S);
  outline-offset: -1px;
}

/* TERTIARY - default - on green */
.btn-tertiary-greenbg {
  color: var(--color__functional__white, var(--color__functional__white, #FFFFFF));
}

/* TERTIARY - hover - on green */
.btn-tertiary-greenbg:hover {
  color: var(--color__primary__color1, var(--color__primary__color1, #004A2E));
}

/* TERTIARY - focus - on green */
.btn-tertiary-greenbg:focus {
  box-shadow: 0px 0px 0px 2px var(--color__primary__color2, #2D810E), 0px 0px 0px 4px var(--color__functional__white, #FFFFFF);
}

/* TERTIARY - disabled - on green */
.btn-tertiary-greenbg-disabled {
  color: var(--color__functional__grey900, var(--color__functional__grey900, #4A5955));
  pointer-events: none;
}

/* TEXT LINK - default - on green */
.btn-textlink-greenbg {
  color: var(--color__functional__white, var(--color__functional__white, #FFFFFF));
}

/** ------------------------------------------------- **/
/** //// ON DARK GREEN BACKGROUND //// **/
/** ------------------------------------------------- **/
  
/* PRIMARY - default */
.btn-primary-darkgreenbg {
  background: var(--color__functional__white, #FFFFFF);
  color: var(--color__primary__color1, var(--color__primary__color1, #004A2E));
}

/* PRIMARY - hover */
.btn-primary-darkgreenbg:hover {
  background: var(--color__primary__color3, #BBD600);
  color: var(--color__primary__color1, var(--color__primary__color1, #004A2E));
}

/* PRIMARY - focus */
.btn-primary-darkgreenbg:focus {
  background: var(--color__functional__white, #FFFFFF);
  color: var(--color__primary__color1, var(--color__primary__color1, #004A2E));
  box-shadow: 0px 0px 0px 2px var(--color__functional__white, #FFFFFF), 0px 0px 0px 3px var(--color__primary__color1, #004A2E);
}

/* PRIMARY - disabeld */
.btn-primary-darkgreenbg:disabled {
  background: var(--color__functional__grey300, #F1F3F2);
  color: var(--color__functional__grey900, var(--color__functional__grey900, #4A5955));
  outline-color: var(--color__functional__grey900);
  outline-style: solid;
  outline-width: var(--borders__stroke__S);
  outline-offset: -1px;
}

/* SECONDARY - default */
.btn-secondary-darkgreenbg {
  color: var(--color__functional__white, var(--color__functional__white, #FFFFFF));
  outline-color: var(--color__functional__white);
  outline-style: solid;
  outline-width: var(--borders__stroke__S);
  outline-offset: -1px;
}

/* SECONDARY - hover */
.btn-secondary-darkgreenbg:hover {
  background: var(--color__functional__white, #FFFFFF);
  color: var(--color__primary__color1, var(--color__primary__color1, #004A2E));
}

/* SECONDARY - focus */
.btn-secondary-darkgreenbg:focus {
  background: var(--color__functional__white, #FFFFFF);
  color: var(--color__primary__color1, var(--color__primary__color1, #004A2E));
  box-shadow: 0px 0px 0px 2px var(--color__primary__color1, #004A2E), 0px 0px 0px 3px var(--color__functional__white, #FFFFFF);
}

/* SECONDARY - disabled */
.btn-secondary-darkgreenbg:disabled {
  background: var(--color__functional__grey500, #C2CAC8);
  color: var(--color__functional__grey900, var(--color__functional__grey900, #4A5955));
  outline-color: var(--color__functional__grey500);
  outline-style: solid;
  outline-width: var(--borders__stroke__S);
  outline-offset: -1px;
}

/* TERTIARY - default */
.btn-tertiary-darkgreenbg {
  color: var(--color__functional__white, var(--color__functional__white, #FFFFFF));
}

/* TERTIARY - hover */
.btn-tertiary-darkgreenbg:hover {
  color: var(--primary-color-3, var(--color__primary__color3, #BBD600));
}

/* TERTIARY - focus */
.btn-tertiary-darkgreenbg:focus {
  box-shadow: 0px 0px 0px 2px var(--color__primary__color1, #004A2E), 0px 0px 0px 4px var(--color__functional__white, #FFFFFF);
}

/* TERTIARY - disabled */
.btn-tertiary-darkgreenbg-disabled {
  color: var(--color__functional__grey900, var(--color__functional__grey900, #4A5955));
  pointer-events: none;
}

/* TEXT LINK on dark green */
.btn-textlink-darkgreenbg {
  color: var(--color__functional__white, var(--color__functional__white, #FFFFFF));
}



/* Extra small devices (767) */
@media only screen and (max-width: 767px) {

  .button {
    width: 100%;
  }

  .buttons {
    display: flex;
    flex-direction: column;
    gap: var(--inline__M);
    width: 100%;
  }

}