make element move left

    {
        margin-right: -3rem;
    }

fill color

    {
        width: 2.5rem;
        height: 2.5rem;
        fill: var(--color-grey-dark-3);
    }

-webkit-input-placeholder

    &::-webkit-input-placeholder {
        font-weight: 100;
        color: var(--color-grey-light-3);
    }

currentColor, change along the parent color.

    .a {
        color: orangered;
        .side-nav__icon {
            fill: currentColor;
        }
    }

scale element from zero to full height from the bottom

    .side-nav__item::before {
        transform: scaleY(0);
        /* transform from the bottom */
        transform-origin: bottom;
        transition: transform 1s;
    }

    .side-nav__item:hover::before {
        transform: scaleY(1);
    }

z-index only works if we have specified position.

{
    position: relative;
    z-index : 10;
}