Styled-components syntax highlighting syntax with nested

[kud]

const Timeline = styled.ul`
  list-style: none;
  display: flex;
  width: 100%;
  margin: 0;
  padding: 6rem 0;
  font-family: var(--font-family-cond-semibold);
  letter-spacing: 0.1rem;

  ${({ finished }) =>
    finished &&
    css`
      ${Timeline.Item}:last-of-type {
        ${Timeline.Item.Bullet} {
          background: yellow;
        }
      }
    `}
`

Timeline.Item = styled.li`
  display: flex;
  position: relative;
  flex-grow: 1;
  text-align: center;

  &:before,
  &:after {
    content: "";
    flex-grow: 1;
    border-top: 2px solid white;
    margin-top: 20px;
  }

  &:first-of-type {
    text-align: left;
  }

  &:last-of-type {
    text-align: right;
  }

  &:first-of-type:before {
    display: none;
  }

  &:last-of-type:after {
    display: none;
  }

  ${({ isSelected }) =>
    isSelected &&
    css`
      ${Timeline.Item.Header.When} {
        margin-top: -0.3rem;
        font-size: 1.4rem;
      }

      ${Timeline.Item.Header.When} {
        font-size: 1.4rem;
      }
    `}
`