/* button.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── Button ── */
.Button_button {
  display:flex;
  cursor:pointer;
  width:auto;
  align-items:center;
  height:40px;
  padding:10px 30px;
  background:var(--color-yellow);
  font-size:16px;
  line-height:20px;
  text-align:center;
  justify-content:center;
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
  color:var(--color-green);
  margin:0;
  border-radius:var(--border-radius-button);
  text-transform:uppercase;
  font-weight:500;
  border:none;
  transition:all .3s cubic-bezier(.23,1,.32,1);
  white-space:nowrap;
}

.Button_secondary {
  background:var(--color-white);
  border:1px solid var(--color-green);
  color:var(--color-green);
}

.Button_tertiary {
  background:transparent;
  border:1px solid var(--color-yellow);
  color:var(--color-yellow);
}

.Button_textual {
  border:none;
  background:transparent;
  color:var(--color-green);
  display:inline;
  width:auto;
  padding:0;
  margin:0;
}

.Button_form {
  height:47px;
}

.Button_button.Button_large {
  height:56px;
  padding:16px;
  font-size:22px;
  line-height:1.22;
}

.Button_leadingIcon,
.Button_loadingSpinner,
.Button_trailingIcon {
  display:inline-flex;
  align-items:center;
  align-self:center;
  margin-right:8px;
}

.Button_trailingIcon {
  margin-left:8px;
  margin-right:0;
}

.Button_largeIcon {
  font-size:24px;
  line-height:1;
  margin-bottom:0;
  align-self:center;
}

.Button_anchor {
  display:flex;
  margin:0;
  width:auto;
  align-items:center;
}

.Button_anchor .Button_button {
  width:100%;
}

.Button_disabled {
  opacity:.3;
}

.Button_button.Button_loading {
  opacity:1;
}

.Button_button.Button_disabled:not(.Button_secondary):not(.Button_tertiary):not(.Button_textual) {
  opacity:1;
  background:var(--color-medium-yellow);
  color:color-mix(in srgb,var(--color-green) 50%,transparent);
}

.Button_button.Button_disabled:not(.Button_secondary):not(.Button_tertiary):not(.Button_textual) .Button_leadingIcon,
.Button_button.Button_disabled:not(.Button_secondary):not(.Button_tertiary):not(.Button_textual) .Button_trailingIcon {
  opacity:.5;
}

@media (min-width:960px) {
  .Button_button {
    font-size:18px;
    padding:12px 30px;
    height:48px;
  }
}

@media (min-width:960px) {
  .Button_button.Button_large {
    padding:13px 28px;
  }
}

@media (min-width:960px) {
  .Button_textual {
    padding:0;
  }
}

@media (min-width:960px) {
  .Button_button:hover {
    background:#f0c47a;
  }
}

@media (min-width:960px) {
  .Button_secondary:hover .Button_leadingIcon,
  .Button_secondary:hover .Button_trailingIcon {
    filter:brightness(0) invert(1);
  }
}

@media (min-width:960px) {
  .Button_secondary:hover {
    background:var(--color-green);
    color:var(--color-white);
  }
}

@media (min-width:960px) {
  .Button_tertiary:hover {
    background:var(--color-yellow);
    color:var(--color-green);
  }
}

@media (min-width:960px) {
  .Button_textual:hover {
    background:transparent;
  }
}