.bricks-button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 13px 22px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(.2, .7, .3, 1);

  &.sm {
    padding: 9px 16px;

  }

  &.md {
    padding: 13px 22px;
        svg{
      width:20px;
      height:20px;
    }
  }

  &.bricks-background-primary {
    color: #04121a;
    background: var(--cyan);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 30px rgba(255, 255, 255, 0.22);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 12px 40px rgba(255, 255, 255, 0.42);
    }
  }

  
  &.bricks-background-ghost {
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line-2);

    border-radius: 10px;

    &:hover {
      border-color: var(--cyan);
      background: var(--panel-2);
      box-shadow: 0 0 22px rgba(255, 255, 255, 0.16);
    }
  }

  
  &.bricks-background-subtle {
    font-size: 13px;
    font-weight: 500;

    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--text);

    &:hover {
      border-color: var(--cyan);
      box-shadow: 0 0 18px rgba(255, 255, 255, 0.2);
    }
  }
}