refactor: fix sass deprecations and migrate to new syntax

[khaledosman]

What's changing

The new sass version introduce breaking changes that are currently being logged as deprecation warnings that will error out in the next major sass and vite versions. This PR aims to migrate to the latest syntax to fix these deprecation warnings.

The two main changes that affected us are:
Sass modules: https://sass-lang.com/documentation/breaking-changes/import/ & https://css-tricks.com/introducing-sass-modules/
Slash syntax: https://sass-lang.com/documentation/breaking-changes/slash-div/

How to test it

Steps to test the changes:

1. Run npm run-script build before and after the change and compare the logged output
2. Quickly go through the application to ensure there's no major regression bugs in the css

Additional notes for reviewers

Some of the changes were done using the automatic migrator: https://sass-lang.com/documentation/breaking-changes/import/#automatic-migration

More info here: https://css-tricks.com/introducing-sass-modules/

I already...

• Tested the changes in a working environment to ensure they work as expected
• Added some tests for any new functionality
• Updated the documentation (both comments in code and product documentation under /docs)
• Checked if a (backend) DB migration step was required and included it if required

[khaledosman]

this is kind of a hack, unlike @import @use namespaces the imported stylesheets, so for example to use $l-space-1 variable defined in the variables.scss stylesheet we should use it as variables.$l-spacing-1, however the as * is just a hack to minimise the changes to existing code, it namespaces the variables globally similar to @import's behavior, but locally scoped to the file where its imported

So in our case here those members are still locally scoped to the current vue component which is fine as it doesn't bleed onto other css files or rules.

[khaledosman]

I dont like that we have some style tags within the component that are not scoped, there's room for refactoring here and in other components so that each component truly styles what it renders only and make sure each component is encapsulated correctly with its styles