
.brxe-button.bricks-button, .btn-solid, .btn-outline {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 100px;
  max-width: 100%;
  gap: 12px;
  line-height: 1.4;
  text-align: center;
  font-variation-settings: "wght" 550;
  border-style: solid;
  border-width: 2px;
  border: solid 2px;
  border-radius: 0;
  box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, .1);
  transition: background-color .2s ease-in, border-color .2s ease-in, color .2s ease-in;
  margin: 0;
}

.btn-solid:hover, .btn-outline:hover, .bricks-button.bricks-background-info:hover, .pointer:hover, .brxe-button.bricks-button:hover {
  cursor: pointer;
}

.btn-solid p, .btn-outline p {
  text-align: center;
  line-height: 1.4;
}

.btn-solid p {
  font-variation-settings: "wght" 550;
}

.btn-outline p {
  font-variation-settings: "wght" 600;
}

.btn-outline {
  background-color: transparent;
}


.btn-xs {
  padding: .3em 1em;
}

.bricks-button.sm, .btn-s {
  font-size: var(--s);
  padding: .6em 1.2em;
}

.bricks-button.md, .btn-m {
  font-size: var(--p);
  padding: .6em 1.5em;
}

.bricks-button.lg, .btn-l {
  font-size: var(--p);
  padding: .9em 1.8em;
}

.bricks-button.xl, .btn-xl {
  font-size: var(--p);
  padding: 1.2em 2em;
}

.btn-xs p {
  font-size: var(--xs);
}

.btn-s p {
  font-size: var(--s);
}

.btn-m p, .btn-l p, .btn-xl p {
  font-size: var(--p);
}


.bricks-button.bricks-background-primary, .btn-solid.btn-primary {
  color: var(--mof0);
  background-color: var(--mc500);
  border-color: var(--mc500);
}

.bricks-button.bricks-background-light, .btn-solid.btn-primary-light {
  border-width: 1px;
  color: var(--mc500);
  background-color: var(--mc50);
  border-color: var(--mc200);
}

.bricks-button.bricks-background-secondary, .btn-solid.btn-secondary {
  color: var(--mof0);
  background-color: var(--sc500);
  border-color: var(--sc500);
}

.bricks-button.bricks-background-dark, .btn-solid.btn-secondary-light {
  border-width: 1px;
  color: var(--sc500);
  background-color: var(--sc50);
  border-color: var(--sc200);
}

.bricks-button.bricks-background-info {
  font-variation-settings: "wght"600;
  color: var(--mof980);
  background-color: var(--mof200);
  border-color: var(--mof200);
}


.bricks-button.outline.bricks-color-primary, .btn-outline.btn-primary, .btn-outline.btn-primary-light {
  background: var(--mof100);
  color: var(--mc500);
  border-color: var(--mc500);
}

.bricks-button.outline.bricks-color-secondary, .btn-outline.btn-secondary, .btn-outline.btn-secondary-light {
  background: var(--mof100);
  color: var(--sc500);
  border-color: var(--sc500);
}


.bricks-button:hover.bricks-background-primary,
.bricks-button:hover.outline.bricks-color-primary,
.bricks-button:hover.bricks-background-secondary,
.bricks-button:hover.outline.bricks-color-secondary,
.bricks-button:hover.bricks-background-info,
.btn-primary:hover, .btn-secondary:hover {
  color: var(--mof0);
  background-color: var(--mof900);
  border-color: var(--mof900);
}

.bricks-button:hover.bricks-background-light,
.bricks-button:hover.bricks-background-dark,
.btn-primary-light:hover, .btn-secondary-light:hover {
  color: var(--mof0);
  background-color: var(--mof600);
  border-color: var(--mof600);
}


.btn-rounded {
  border-radius: 99px;
}

.btn-radius {
  border-radius: var(--br1);
}


.btn-solid p:has(+ p), .btn-outline p:has(+ p) {
  font-variation-settings: "wght" 700;
}

.btn-solid p:nth-child(2), .btn-outline p:nth-child(2) {
  font-variation-settings: "wght" 400;
}

.btn-m:nth-child(2), .btn-m p:nth-child(2), .btn-l:nth-child(2), .btn-l p:nth-child(2), .btn-xl:nth-child(2), .btn-xl p:nth-child(2) {
  font-size: var(--s);
}


.btn-icon {
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
  row-gap: var(--m8);
}

.btn-footer {
  width: 360px;
  max-width: 80%;
}


.btn-sale:is(a, :active, :visites, :focus) {
  color: var(--mof0);
  background-color: var(--sc500);
  border-color: var(--mof0);
}

.btn-sale:hover {
  color: var(--mof0);
  background-color: var(--mof900);
  border-color: var(--mof900);
}