/*
    - Name: "button.scss"
    - Description: "Add custom styles to button component"
*/
.btn {
  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, .btn.btn-icon.btn-primary {
  background-color: var(--buttonColorPrimaryBackground);
  color: var(--buttonColorPrimaryText);
  border-color: var(--buttonBorderPrimaryColor);
}

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

.btn.btn-primary: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 {
  background-color: var(--selectColorButtonStrokeDisabled);
  color: var(--buttonColorPrimaryText);
  border-color: var(--selectColorButtonStrokeDisabled);
}

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

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

.btn.btn-secondary: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 {
  background-color: var(--buttonColorSecondaryBackground);
  color: var(--selectColorButtonStrokeDisabled);
  border-color: var(--selectColorButtonStrokeDisabled);
}

.btn.btn-lg {
  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 {
  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 {
    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 {
  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 {
  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.btn-text-icon i::before {
  font-size: 2.125rem;
  margin-left: 0;
}

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

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

.btn.btn-icon {
  /*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 {
  pointer-events: none;
}

.btn:hover {
  cursor: pointer;
}

@media all and (min-width: 50.0625rem) {
  .btn:not(.btn-icon) {
    width: -moz-max-content;
    width: max-content;
    min-width: 192px;
    box-sizing: border-box;
  }
}
/*# sourceMappingURL=button.css.map */