.bricks-button {
  line-height: normal;
  font-weight: var(--fw-button);
  border-radius: var(--border-radius-xs);

  &.sm {
    font-size: var(--fs-button-s);
    gap: 0rem;


    &.icon-left {
      padding: 0px 8px 0px 0px;
    }

    &.icon-right {
      padding: 0px 0px 0px 8px;
    }

    svg {
      width: 22.5px;
      height: 22.5px;
      margin: 3.75px;
    }
  }

  &.md {
    font-size: var(--fs-button-m);
    gap: 0.4rem;
    padding:2px 10px;
    
    &.icon-left {
      padding: 2px 10px 2px 4px;
    }

    &.icon-right {
      padding: 2px 4px 2px 10px;
    }

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

}

.bricks-background-primary {
  background-color: var(--color-primary-btn);
  color: #fff;
  svg{
    path{
    fill:white;}
  }
  
  &:hover {
    background-color: var(--color-primary-btn--hover);
  }

  &:active {
    background-color: var(--color-primary-btn--active);
  }

  &:focus {
    background-color: var(--color-primary-btn--focus);
    outline: 1px dashed white;
    outline-offset: -1px;

  }

}

.bricks-background-secondary {
  svg path {
    fill: black
  }

  border:1px solid black;
  background-color: var(--color-secondary-btn);
  color: black;

  &:hover {
    background-color: var(--color-secondary-btn--hover);
  }

  &:active {
    background-color: var(--color-secondary-btn--active);
  }

  &:focus {
    background-color: var(--color-secondary-btn--focus);
    outline: 1px dashed black;
    outline-offset: -1px;
    border: 1px solid transparent;
  }
  
  &.btn-disabled{
    color:var(--color-gray-500);
        border-color:var(--color-gray-500);
    svg path{
      fill:var(--color-gray-500) !important;
    }
  }

}