.bricks-button,
.fofl-toggle-buttons__button {
  position: relative;
  transition: background-color var(--transition-02);
  border-radius: 100px;
  font-weight: 600;
  overflow: hidden;

  &.fw {
    width: 100%;
  }

  
  &.md,
  &.sm {
    &::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      opacity: 0;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      pointer-events: none;
      z-index: 1;
    }
  }

  &.md,
  &.md-sm--sm {
    padding: 16px 2.4rem;
    font-size: var(--fs-button);
    line-height: var(--lh-button);
    gap: 8px;

    svg {
      width: 24px;
      height: 24px;
    }
  }

  &.md {
    &::after {
      width: 115px;
      height: 38px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='115' height='38' viewBox='0 0 115 38' fill='none'%3E%3Cpath d='M115 4.23956V38H0C0 17.0132 35.2783 0 78.7963 0C91.8486 0 104.16 1.53046 115 4.23956Z' fill='%2349454F' fill-opacity='0.1'/%3E%3C/svg%3E");
    }
  }

  &.sm {
    padding: 10px 1.6rem;
    font-size: var(--fs-button);
    line-height: var(--lh-button-s);
    gap: 8px;

    svg {
      width: 20px;
      height: 20px;
    }

    &::after {
      width: 84px;
      height: 28px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='28' viewBox='0 0 84 28' fill='none'%3E%3Cpath d='M84 3.12389V28H0C0 12.536 25.7685 0 57.5556 0C67.0894 0 76.0818 1.12771 84 3.12389Z' fill='%2349454F' fill-opacity='0.1'/%3E%3C/svg%3E");
    }
  }

  &.md-sm--sm {
    @media (max-width: 1199px) {
      padding: 10px 1.6rem;
      line-height: var(--lh-button-s);

      svg {
        width: 20px;
        height: 20px;
      }
    }
  }

  &:active {
    &::after {
      opacity: 1;
    }
  }
}

.bricks-background-primary,
.fofl-toggle-buttons__button[data-state="active"] {
  background-color: var(--dvfg-yellow);
  color: var(--dvfg-darkgreen);

  &:hover:not(:disabled) {
    background-color: var(--dvfg-yellow-hover);
  }

}

.bricks-background-secondary,
.fofl-toggle-buttons__button[data-state="inactive"] {
  background-color: transparent;
  color: white;
  outline: 1.5px solid #FFF;
  outline-offset: -1.5px;


  &:hover {
    background: rgba(255, 255, 255, 0.10);
  }



  &.btn-light {
    color: white !important;
    border-color: white;

  }
}