.m-menu-side-navigation {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0.625rem 1.5625rem;
  list-style: none;
}

  @media all and (min-width: 769px) {.m-menu-side-navigation {
    padding: 1.25rem
}
  }

  .m-menu-side-navigation__item {
    border-radius: 1.25rem;
  }

  .m-menu-side-navigation__item--active {
      background-color: var(--color-greyscale-7);
    }

  .m-menu-side-navigation__link {
    display: flex;
    align-items: center;
    padding: 0.625rem;
    transition-timing-function: var(--transition-timing-function-cubic-bezier);
    transition-duration: var(--transition-duration-0-25);
    transition-property: color, background-color;
    text-decoration: none;
    color: inherit;
    border-radius: 0.9375rem;
    gap: 0.9375rem;
  }

  @media (hover: hover) {

  .m-menu-side-navigation__link:hover {
        background-color: var(--color-greyscale-7)
    }
      }

  @media (hover: hover) {

  .m-menu-side-navigation__link--sub:hover {
          color: var(--color-main-1)
      }
        }

  .m-menu-side-navigation__button--active {
      color: var(--color-greyscale-7);
      background-color: var(--color-main-1);
    }

  @media (hover: hover) {

  .m-menu-side-navigation__button--active:hover {
          background-color: var(--color-main-2)
      }
        }

  .m-menu-side-navigation__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--color-greyscale-4);
    transition: fill var(--transition-duration-0-25) var(--transition-timing-function-cubic-bezier);
  }

  .m-menu-side-navigation__button--active .m-menu-side-navigation__icon {
      fill: var(--color-greyscale-7);
    }

  @media (hover: hover) {

  .m-menu-side-navigation__link--sub:hover .m-menu-side-navigation__icon {
        fill: var(--color-main-1)
    }
      }

  .m-menu-side-navigation__chevron {
    width: 0.5rem;
    height: 0.5rem;
    margin-left: auto;
    transition-timing-function: var(--transition-timing-function-cubic-bezier);
    transition-duration: var(--transition-duration-0-25);
    transition-property: fill, transform;
    fill: var(--color-greyscale-4);
  }

  .m-menu-side-navigation__button--active .m-menu-side-navigation__chevron {
      transform: rotate(-180deg);
      fill: var(--color-greyscale-7);
    }

  .m-menu-side-navigation__sub-menu {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .m-menu-side-navigation__sub-menu--active {
      display: block;
    }