[data-component='SideNavigation'] {
  background-color: hsl(210, 10%, 30%);
  box-shadow: var(--shadow-medium);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  width: var(--side-navigation-width);

  a {
    align-items: center;
    border-bottom: 1px solid hsl(210, 5%, 20%);
    box-sizing: unset;
    color: white;
    display: flex;
    height: 75px;
    justify-content: center;
    position: relative;
    text-decoration: none;
    transition-duration: 250ms;
    transition-property: background-color;

    &:hover {
      background-color: hsl(210, 10%, 15%);
    }

    &.selected {
      background-color: hsl(210, 10%, 20%);

      &::before {
        background-color: var(--blue-highlight);
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        width: 4px;
      }
    }

    img {
      width: 40px;
    }
  }

  @media screen and (max-width: 768px) {
    & {
      display: none;
    }
  }
}