/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./frontend/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./frontend/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./web/app/themes/codekrakers/components/button/src/button.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --btn-padding: 1.1rem 2.3rem;
  --btn-radius: 0.8rem;
  --btn-border: 1px;
  --btn-gap: 0.8rem;
  --btn-bg: var(--orange-500, #e67025);
  --btn-bordercolor: transparent;
  --btn-color: var(--black, #151312);
  --btn-fontface: var(--font-base, "Manrope", sans-serif);
  --btn-fontsize: 1.4rem;
  --btn-fontweight: 600;
  --btn-lineheight: 1.2;
  --btn-letterspacing: 0.04em;
  --btn-transform: uppercase;
  --btn-iconsize: 1ch;
}

:is(.btn, input[type=submit], button[type=submit]) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-padding);
  border: var(--btn-border) solid var(--btn-bordercolor);
  border-radius: var(--btn-radius);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  font-size: var(--btn-fontsize);
  font-family: var(--btn-fontface);
  font-weight: var(--btn-fontweight);
  letter-spacing: var(--btn-letterspacing);
  line-height: var(--btn-lineheight);
  text-align: center;
  text-transform: var(--btn-transform);
  cursor: pointer;
  text-decoration: none;
  transition: 0.25s;
}
:is(.btn, input[type=submit], button[type=submit]):hover {
  filter: brightness(0.94);
}
:is(.btn, input[type=submit], button[type=submit]):disabled {
  opacity: 0.35;
  cursor: default;
  filter: none;
}
:is(.btn, input[type=submit], button[type=submit]).btn--small {
  --btn-padding: 0.8rem 1.6rem;
  --btn-fontsize: 1.2rem;
}
:is(.btn, input[type=submit], button[type=submit]).btn--white {
  --btn-bg: var(--white-pure, #fff);
  --btn-color: var(--black, #151312);
  --btn-bordercolor: transparent;
}
:is(.btn, input[type=submit], button[type=submit]).btn--stroke {
  --btn-bg: transparent;
  --btn-color: light-dark(var(--black, #151312), var(--white-pure, #fff));
  --btn-bordercolor: light-dark(var(--black, #151312), var(--white-pure, #fff));
}
:is(.btn, input[type=submit], button[type=submit]).btn--stroke :hover {
  filter: none;
}
:is(.btn, input[type=submit], button[type=submit]).btn--icon {
  gap: 1rem;
}
:is(.btn, input[type=submit], button[type=submit]).btn--icon::after {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: var(--btn-iconsize);
  aspect-ratio: 1;
}
:is(.btn, input[type=submit], button[type=submit]).btn--icon-only {
  --btn-padding: 0;
  --btn-gap: 0;
  aspect-ratio: 1;
}
:is(.btn, input[type=submit], button[type=submit]).btn--bare {
  --btn-padding: 0;
  --btn-bg: transparent;
  --btn-bordercolor: transparent;
  --btn-color: inherit;
  --btn-radius: 0;
  --btn-letterspacing: normal;
  --btn-transform: none;
  --btn-fontweight: 400;
  --btn-gap: 0.4rem;
}
:is(.btn, input[type=submit], button[type=submit]).btn--bare:hover {
  filter: none;
}
:is(.btn, input[type=submit], button[type=submit]).btn--link {
  --btn-padding: 0;
  --btn-bg: transparent;
  --btn-bordercolor: transparent;
  --btn-color: var(--text-color, var(--black, #151312));
  --btn-radius: 0;
  --btn-letterspacing: normal;
  --btn-transform: none;
  --btn-fontsize: 1.4rem;
  --btn-gap: 0.4rem;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}
:is(.btn, input[type=submit], button[type=submit]).btn--link:hover {
  filter: none;
}
:is(.btn, input[type=submit], button[type=submit]).btn--accent {
  --btn-color: var(--orange-500, #e67025);
}
:is(.btn, input[type=submit], button[type=submit]).btn--field {
  --btn-padding: 1rem 1.2rem;
  --btn-bg: var(--white-pure, #fff);
  --btn-bordercolor: var(--text-color, var(--black, #151312));
  --btn-color: var(--text-color, var(--black, #151312));
  --btn-radius: 0;
  --btn-letterspacing: normal;
  --btn-transform: none;
  --btn-fontweight: 400;
  --btn-lineheight: 1.4;
  justify-content: space-between;
  inline-size: 100%;
  min-block-size: 4rem;
  text-align: start;
}
:is(.btn, input[type=submit], button[type=submit]).btn--field:hover {
  filter: none;
}

.full-link {
  position: absolute;
  inset: 0;
  z-index: 5;
}