How to position the left/right controls the right way

[GiorgosK]

I have looked at this https://stackoverflow.com/questions/56988717/how-to-target-a-component-in-svelte-with-css and I ended up doing this in my CSS

.c-left {
  position: absolute;
  left: -2vw;
  top: 0;
}

<span class="control c-left" slot="left-control">
   <ChevronLeftIcon />
</span>

is there a recommended way to modify the left/right control positioning ?

[antony]

The way I do it is by using :global() in the consuming project

[GiorgosK]

@antony Thanks, you were right I had to either use important or use an extra element selector to get it to the take precedence

  :global(.carousel .left) {
    left: 0 !important;
  }
  :global(.wrapper .carousel .right) {
    right: 0;
  }

[antony]

You need the extra selector anyway because :global descopes your selector string, so you'd affect css across your entire project which matched the same selector ;)