Parent :host styles affects to :host styles of child

As you can see on picture the app-tracking-elements-table get styles from app-left-menu. I wrote styles in SCSS using :host for both components

I thought that :host is isolated and affects only to hosting element. Is there any way to separate them?

left-menu-component.scss

:host {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;

    position: relative;

    height: 100%;
    width: var(--left-menu-width);
    padding: 12px 0 24px 0;

    background-color: var(--light-100);

    box-shadow: $box-shadow;

    /*Some more styles*/
}

tracking-elements-table.component.scss

:host {
    position: absolute;
    top: 0;
    left: 100%;

    width: 500px;
    height: 100vh;
    background-color: var(--light-100);

    box-shadow: inset $box-shadow;

    /*Some more styles*/
}

Additional info:

P.S. If you need more info please ask me and I will add it to question

The problem was due to importing the styles of one component in another. Due to this the :host styles got applied to another component, which was not intended to.

tracking-elements-table.component.scss

@import '../../../core/components/left-menu/left-menu.component'; // <- remove this!

:host {
    position: absolute;
    top: 0;
    left: 100%;

    width: 500px;

You should only share CSS files that have CSS variables and SCSS variables defined in them, it is ok to import them.

But when dealing with angular components, keep the styles separated in their own respective SCSS files.

If you want you can write CSS mixins to reduce the amount of code.

We can move the common variables to the main styles.scss which is shared among all components.

/* You can add global styles to this file, and also import other style files */
@import 'stryles/reset.css';
@import 'stryles/sizes.css';
@import 'stryles/colors.css';
@import 'stryles/global.css';

:root {
    --switch-position: 5%;
    --hover-bg: linear-gradient(90deg, var(--primary-lightblue) var(--switch-position), var(--primary-extralight) var(--switch-position));
    --selected-bg: linear-gradient(90deg, var(--primary-lightblue) var(--switch-position), var(--primary-deepblue) var(--switch-position));

    --hover-bg-2: linear-gradient(90deg, rgba(51, 170, 255, 1) var(--switch-position), rgba(229, 244, 255, 1) var(--switch-position));
    --selected-bg-2: linear-gradient(90deg, rgba(51, 170, 255, 1) var(--switch-position), rgba(45, 73, 210, 1) var(--switch-position));

}
$box-shadow: 6px 0 18px 0 rgba(0, 0, 0, 0.06);
 

Github Repo