/* Buttons */
.cta-button.brxe-button.bricks-button {
  color: white;
  display: inline-block;
  padding: 0.2rem 2rem;
  border-radius: 2rem;
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-decoration: none;
  font-family: var(--label-font);
  font-size: calc(var(--text-m)*0.9);
  width: max-content;
}
.cta-button.brxe-button.bricks-button:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  transition: all 0.4s;
  border-radius: 2rem;
  z-index: -1;
}
.cta-button.brxe-button.bricks-button.accent-button {
  background-color: var(--accent);
  border: 4px solid var(--accent);
}
.cta-button.brxe-button.bricks-button.accent-button:hover {
  color: var(--base-d-4);
  cursor: pointer;
}
.cta-button.brxe-button.bricks-button.accent-button:hover:before {
  background-color: var(--accent-l-9);
  width: 100%;
}
.cta-button.brxe-button.bricks-button.primary-button {
  background-color: var(--primary-l-2);
  border: 4px solid var(--primary);
}
.cta-button.brxe-button.bricks-button.primary-button:hover {
  color: var(--base-d-2);
  cursor: pointer;
}
.cta-button.brxe-button.bricks-button.primary-button:hover:before {
  background-color: var(--primary-l-9);
  width: 100%;
}
.cta-button.brxe-button.bricks-button.tertiary-button {
  background-color: var(--tertiary);
  border: 4px solid var(--tertiary);
}
.cta-button.brxe-button.bricks-button.tertiary-button:hover {
  color: var(--base-d-4);
  cursor: pointer;
}
.cta-button.brxe-button.bricks-button.tertiary-button:hover:before {
  background-color: var(--tertiary-l-9);
  width: 100%;
}