.bricks-button {
  transition: var(--transition-02);
  font-weight: 500;
  border-radius: var(--border-radius-l);

  &.sm {
    padding: 8px 2rem;
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);

    svg {
      min-width: var(--fs-icon-s);
      width: var(--fs-icon-s);
    }
  }

  &.md {
    padding: 8px 3rem;
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);

    svg {
      min-width: var(--fs-icon-m);
      width: var(--fs-icon-m);
    }
  }

  &.lg {
    padding: 10px 3.5rem;
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);

    svg {
      min-width: var(--fs-icon-l);
      width: var(--fs-icon-l);
    }
  }

  &.xl {
    padding: 10px 4rem;
    font-size: var(--fs-body-xl);
    line-height: var(--lh-body-xl);

    svg {
      min-width: var(--fs-icon-xl);
      width: var(--fs-icon-xl);
    }
  }

}

.bricks-background-primary {
  background-color: var(--color-primary);
  color: #fff;

  svg {
    fill: white;
  }

  &:hover {
    background-color: var(--color-primary-shade-05);
  }

  &:active {
    background-color: var(--color-primary-shade-10);
  }
  
  &:focus-visible{
  outline:2px dashed black;
    outline-offset:-2px;
  }

  &.btn-light {
    background-color: white;
    color: var(--color-primary);

    &:hover {}

    &:active {}
  }
}

.bricks-background-secondary {
  background-color: transparent;
  color: var(--color-primary);
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;

  svg {
    fill: var(--color-primary);
  }

  &:hover {
    background-color: var(--color-grey-05);
  }

  &:active {
    background-color: var(--color-grey-10);
  }
  
    &:focus-visible{
  outline:2px dashed black;

  }

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

  }
}