/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/bp-button/style.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
.bp-button,
.bp-button :is(i, svg, p) {
  text-decoration: none;
  font-style: normal;
}

.bp-button {
  --_bg: var(--color-bg-desktop, var(--wp--custom--button--bg));
  --_color: var(--color-text-desktop, var(--wp--custom--button--text));
  --_icon: var(--color-icon-desktop, var(--_color));
  --_border: var(--color-border-desktop, var(--wp--custom--button--border));
  --desktop-w: var(--wp--custom--button--icon-size);
  width: -moz-fit-content;
  width: fit-content;
  padding-inline: var(--paddingInline, 0);
  padding-block: var(--paddingBlock, 0);
  gap: var(--wp--custom--button--gap);
  border: 1px solid var(--_border);
  background: var(--_bg);
}
.bp-button :is(i, #important) {
  font-style: normal;
  text-decoration: none;
}
.bp-button :is(svg, path, circle, rect) {
  fill: currentColor;
  stroke: currentColor;
}
.bp-button,
.bp-button p {
  color: var(--_color);
}
.bp-button :is(i, svg, #important) {
  color: var(--_icon);
}

@media (hover: hover) {
  .bp-button:hover {
    --_bg: var(--color-bg-hover, var(--wp--custom--button--hover));
    --_border: var(--color-border-hover, var(--color-border-desktop,var(--wp--custom--button--border)));
    --_color: var(--color-text-hover, var(--wp--custom--button--hover-text));
    --_icon: var(--color-icon-hover, var(--_color));
  }
}
@media only screen and (min-width: 0) and (max-width: 960px) {
  .bp-button {
    --_bg: var(--color-bg-mobile, var(--color-bg-desktop,var(--wp--custom--button--bg)));
    --_color: var(--color-text-mobile, var(--color-text-desktop,var(--wp--custom--button--text)));
    --_icon: var(--color-icon-mobile, var(--_color));
    --_border: var(--color-border-mobile, var(--color-border-desktop,var(--wp--custom--button--border)));
  }
}

/*# sourceMappingURL=style-index.css.map*/