/*
    - Name: "input.scss"
    - Description: "Add custom styles to input component"
*/
/*
    - Name: "button.scss"
    - Description: "Add custom styles to button component"
*/
.btn, .form-item.form-submit {
  border-width: var(--buttonBorderWidthBorder);
  border-radius: var(--buttonRadius);
  font-weight: var(--buttonFontWeightText);
  border-style: solid;
  justify-content: center;
  display: flex;
  align-items: center;
  text-decoration: none;
  box-sizing: content-box;
  font-family: var(--largeDefaultFontFamily);
}

.btn.btn-primary, .form-item.form-submit, .form-item.form-submit.btn-icon, .btn.btn-icon.btn-primary {
  background-color: var(--buttonColorPrimaryBackground);
  color: var(--buttonColorPrimaryText);
  border-color: var(--buttonBorderPrimaryColor);
}

.btn.btn-primary:hover, .form-item.form-submit:hover, .btn.btn-primary:focus, .form-item.form-submit:focus {
  background-color: var(--buttonColorPrimaryBackgroundHover);
  color: var(--buttonColorPrimaryTextHover);
  border-color: var(--buttonBorderPrimaryColorHover);
}

.btn.btn-primary:active, .form-item.form-submit:active {
  background-color: var(--buttonColorSecondaryBackgroundHover);
  color: var(--buttonColorSecondaryTextHover);
  border-color: var(--buttonBorderSecondaryColorHover);
  box-shadow: 0px 0px 0px 2px var(--buttonColorPrimaryText), 0px 0px 0px 4px var(--buttonBorderSecondaryColorHover);
}

.disabled.btn.btn-primary, .disabled.form-item.form-submit {
  background-color: var(--selectColorButtonStrokeDisabled);
  color: var(--buttonColorPrimaryText);
  border-color: var(--selectColorButtonStrokeDisabled);
}

.btn.btn-secondary, .btn-secondary.form-item.form-submit, .btn.btn-icon.btn-secondary {
  background-color: var(--buttonColorSecondaryBackground);
  color: var(--buttonColorSecondaryText);
  border-color: var(--buttonBorderSecondaryColor);
}

.btn.btn-secondary:hover, .btn-secondary.form-item.form-submit:hover, .btn.btn-secondary:focus, .btn-secondary.form-item.form-submit:focus {
  background-color: var(--buttonColorSecondaryBackgroundHover);
  color: var(--buttonColorSecondaryTextHover);
  border-color: var(--buttonBorderSecondaryColorHover);
}

.btn.btn-secondary:active, .btn-secondary.form-item.form-submit:active {
  background-color: var(--buttonColorSecondaryBackgroundHover);
  color: var(--buttonColorSecondaryTextHover);
  border-color: var(--buttonBorderSecondaryColorHover);
  box-shadow: 0px 0px 0px 2px var(--buttonColorPrimaryText), 0px 0px 0px 4px var(--buttonBorderSecondaryColorHover);
}

.disabled.btn.btn-secondary, .disabled.btn-secondary.form-item.form-submit {
  background-color: var(--buttonColorSecondaryBackground);
  color: var(--selectColorButtonStrokeDisabled);
  border-color: var(--selectColorButtonStrokeDisabled);
}

.btn.btn-lg, .form-item.form-submit {
  padding-top: var(--buttonLgPaddingY);
  padding-right: var(--buttonLgPaddingX);
  padding-bottom: var(--buttonLgPaddingY);
  padding-left: var(--buttonLgPaddingX);
  gap: 12px;
  font-size: var(--buttonFontSizeLg);
}

.change-to-md.btn.btn-lg, .change-to-md.form-item.form-submit {
  padding-top: var(--buttonMdPaddingY);
  padding-right: var(--buttonMdPaddingX);
  padding-bottom: var(--buttonMdPaddingY);
  padding-left: var(--buttonMdPaddingX);
  font-size: var(--buttonFontSizeMd);
  gap: 10px;
}

@media all and (min-width: 50.0625rem) {
  .change-to-md.btn.btn-lg, .change-to-md.form-item.form-submit {
    padding-top: var(--buttonLgPaddingY);
    padding-right: var(--buttonLgPaddingX);
    padding-bottom: var(--buttonLgPaddingY);
    padding-left: var(--buttonLgPaddingX);
    gap: 12px;
    font-size: var(--buttonFontSizeLg);
  }
}
.btn.btn-md, .btn-md.form-item.form-submit {
  padding-top: var(--buttonMdPaddingY);
  padding-right: var(--buttonMdPaddingX);
  padding-bottom: var(--buttonMdPaddingY);
  padding-left: var(--buttonMdPaddingX);
  gap: 10px;
  font-size: var(--buttonFontSizeMd);
}

.btn.btn-sm, .btn-sm.form-item.form-submit {
  padding-top: var(--buttonSmPaddingY);
  padding-right: var(--buttonSmPaddingX);
  padding-bottom: var(--buttonSmPaddingY);
  padding-left: var(--buttonSmPaddingX);
  font-size: var(--buttonFontSizeSm);
  gap: 8px;
  font-size: var(--buttonFontSizeSm);
}

.btn.btn-icon i::before, .btn-icon.form-item.form-submit i::before, .btn.btn-text-icon i::before, .btn-text-icon.form-item.form-submit i::before {
  font-size: 2.125rem;
  margin-left: 0;
}

.btn.btn-text-icon i, .btn-text-icon.form-item.form-submit i {
  order: 2;
  font-size: 1rem !important;
  margin-left: 1rem;
}

.btn.btn-text-icon i::before, .btn-text-icon.form-item.form-submit i::before {
  font-size: 1rem !important;
}

.btn.btn-icon, .btn-icon.form-item.form-submit {
  /*min-width: 16px;
  max-width: 16px;*/
  /*padding:0;*/
  /*height: 16px;*/
  width: -moz-fit-content;
  width: fit-content;
  border: none;
  background-color: none;
  padding: 0.125rem;
}

.btn.disabled, .disabled.form-item.form-submit {
  pointer-events: none;
}

.btn:hover, .form-item.form-submit:hover {
  cursor: pointer;
}

@media all and (min-width: 50.0625rem) {
  .btn:not(.btn-icon), .form-item.form-submit:not(.btn-icon) {
    width: -moz-max-content;
    width: max-content;
    min-width: 192px;
    box-sizing: border-box;
  }
}
.form-item {
  margin: 0 0 var(--spacingSm) 0;
}

.form-item [type=text],
.form-item [type=date],
.form-item [type=email],
.form-item [type=tel],
.form-item [type=url],
.form-item [type=password] {
  color: var(--colorTextBody);
  font-size: var(--textInputFontSize);
  padding: var(--textInputPaddingX) var(--textInputPaddingY);
  line-height: var(--textInputLabelLineheight);
  border-color: var(--textInputBorderColor);
  border-radius: var(--textInputRadius);
  background-color: var(--textInputBackground);
  display: block;
  border-style: solid;
  border-width: var(--borderWidthTextInput);
  box-sizing: border-box;
  width: 100%;
}

.form-item [type=text] + label,
.form-item [type=date] + label,
.form-item [type=email] + label,
.form-item [type=tel] + label,
.form-item [type=url] + label,
.form-item [type=password] + label {
  color: var(--textInputColorLabel);
  display: block;
}

.form-item.js-form-type-checkbox {
  margin-bottom: var(--spacing2xs);
}

.form-item.js-form-type-radio label, .form-item.js-form-type-checkbox label {
  margin-bottom: 0;
}

.form-item input[type=radio] {
  display: none;
}

.form-item input[type=radio] + label {
  display: inline-block;
  border-radius: 50px;
  color: var(--radioButtonLabelColorLabel);
  font-family: var(--radioButtonTypographyLabelFontFamily), sans-serif;
  font-size: var(--radioButtonTypographyLabelFontSize);
  font-weight: var(--fontWeightRegular);
  position: relative;
  padding: 0 0 0 2rem;
}

.form-item input[type=radio] + label::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 0.8em;
  border: 1px solid var(--radioButtonInputStroke);
  background: #fff;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.form-item input[type=radio]:disabled + label {
  color: var(--radioButtonLabelColorLabelDisabled) !important;
  cursor: not-allowed;
}

.form-item input[type=radio]:disabled + labelafter {
  border-color: var(--radioButtonInputDefault);
}

.form-item input[type=radio]:checked + label::after {
  content: "";
  width: 0;
  height: 0;
  border: 6px solid var(--radioButtonInputChecked);
  float: left;
  border-radius: 100%;
  position: absolute;
  top: 3px;
  left: 3px;
}

.form-item input[type=radio]:checked + label::before {
  border-color: var(--radioButtonInputChecked);
}

.form-item input[type=radio]:checked:disabled + label {
  background: #ccc;
  color: #fff !important;
}

.form-item input[type=radio]:checked:disabled + label::before {
  border-color: #bdbdbd;
}

.form-item input[type=radio]::-moz-placeholder {
  color: var(--color-text-secondary);
}

.form-item input[type=radio]::placeholder {
  color: var(--color-text-secondary);
}

.form-item input[type=checkbox] {
  display: none;
}

.form-item input[type=checkbox] + label {
  line-height: 2.5em;
  color: var(--checkboxLabelColorLabel);
  font-family: var(--checkboxTypographyLabelFontFamily), sans-serif;
  font-size: var(--checkboxTypographyLabelFontSize);
  font-weight: var(--fontWeightRegular);
}

.form-item input[type=checkbox] + label::before {
  content: "";
  width: var(--checkboxSize);
  height: var(--checkboxSize);
  float: left;
  margin-right: var(--checkboxSpacingGap);
  border: 1px solid var(--checkboxInputStroke);
  border-radius: var(--checkboxRadius);
  background: var(--checkboxInputDefault);
  margin-top: var(--checkboxSpacingGap);
}

.form-item input[type=checkbox]:disabled + label {
  color: var(--checkboxLabelColorLabelDisabled);
  cursor: not-allowed;
}

.form-item input[type=checkbox]:checked + label {
  background: var(--checkboxInputDefault);
}

.form-item input[type=checkbox]:checked + label::before {
  background-color: var(--checkboxInputChecked);
  border-color: var(--checkboxInputStroke);
}

.form-item input[type=checkbox]:checked + label::after {
  content: "";
  width: 10px;
  height: 4px;
  border: 3px solid var(--checkboxInputDefault);
  float: left;
  margin-left: -1.65em;
  border-right: 0;
  border-top: 0;
  margin-top: 0.85em;
  transform: rotate(-50deg);
}