.bricks-button {
  font-family: "Poppins";
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);

  transition: all var(--duration-base) var(--ease-out);
  line-height: 1.6;

  &.sm {
    font-size: var(--fs-body-xs);
    padding: 1rem 2rem;
  }

  &.md {
    padding: 1.4rem 3.2rem;
    font-size: var(--fs-body-s);

    &:hover {}

    &:active {}
  }

  &.lg {
    padding: 1.76rem 4rem;
    font-size: var(--fs-body-m);
  }

  &.xl {
    padding: 2.24rem 4.8rem;
    font-size: var(--fs-body-l);
  }

  &.btn--dark {
    background: var(--clr-black);
    color: var(--clr-white-pure);

    &:hover {
      background: var(--clr-gray-700);
    }
  }

  &.btn--outline {
    background: transparent;
    color: var(--clr-orange);
    border: 1.5px solid var(--clr-orange);

    &:hover {
      background: var(--clr-orange);
      color: var(--clr-white-pure);
    }
  }

}

.bricks-background-primary {
  background: var(--clr-orange);
  color: var(--clr-white-pure);
  box-shadow: var(--shadow-orange);

  &:hover {
    background: var(--clr-orange-dark);
    box-shadow: 0 12px 40px rgba(255, 117, 31, 0.35);
  }

  &:active {}

  &.btn-light {


    &:hover {}

    &:active {}
  }
}

.bricks-background-secondary {
  background: transparent;
  color: var(--clr-white-pure);
  border: 1.5px solid rgba(255, 255, 255, 0.4);

  &:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
  }

  &:active {}


}

.bricks-background-dark {
  background: var(--clr-black);
  color: var(--clr-white-pure);

  &:hover {
    background: var(--clr-gray-700);

  }
}