CSS dinâmico

Grande Flávio! Antes de mais nada, seu curso está top demais! ;-)

Agora vamos à minha dúvida:

Eu estou tentando gerar um componente com css dinâmico (quero que seja possível definir algumas propriedades css do meu componente a quem for usá-lo ).

Em síntese, estou tentando fazer o seguinte:

@Component({
  selector: 'pje-botao-scroll-retratil',
  templateUrl: './botao-scroll-retratil.component.html',
  styleUrls: ['./botao-scroll-retratil.component.scss']
})
export class BotaoScrollRetratilComponent implements OnInit {
  //Algumas linhas omitidas acima
  @Input() top: string;
  @Input() left: string;

  private posicaoVertical:   string = 'bottom: 100px;';
  private posicaoHorizontal: string = 'right: 35px;';

  constructor() { }

  ngOnInit(): void {
    if (this.top)  {
      this.posicaoVertical = (this.top.startsWith('-')) ? `bottom: ${this.top.substr(1)}` : `top: ${this.top}`;
    }
    if (this.left)  {
      this.posicaoHorizontal = (this.left.startsWith('-')) ? `right: ${this.left.substr(1)}` : `left: ${this.left}`;
    }
  }
}

No meu arquivo de css do componente (arquivo botao-scroll-retratil.component.scss) eu preciso embutir o conteúdo das variáveis posicaoVertical e posicaoHorizontal do componente. Algo do tipo abaixo:

.fab-fixed {
  position: fixed !important;
  {{posicaoVertical}}
  {{posicaoHorizontal}}
  z-index: 9999999;
}

Minha intenção é que quem for usar o meu componente possa fazer algo do tipo abaixo:

      <pje-botao-scroll-retratil top="50px" left="-80px"></pje-botao-scroll-retratil>

Só que isso não está funcionando. O código sequer compila quando tento usar '{{ ... }}' no arquivo botao-scroll-retratil.component.scss. Você saberia dizer como faço para usar o '{{ ... }}' no css do componente? Ou qual é a solução para esse problema?

Muito obrigado!