const StylesWithCss = css`  margin: 0;  background: red;   & > * {  /* valid highlight */  margin: 10px;  } `; const StylesWithTopLevel = styled.div<{ $margin?: string; $isActive: boolean | undefined }>( ({ $margin, $isActive }) => css`  display: flex;  flex-direction: column;  margin: ${$margin};  width: 100%;  overflow: hidden;  position: relative;   ${$isActive  ? css`  margin: 0;  background: red;  `  : ''}  ` ); const StylesWithCondition = styled.div<{ $isActive: boolean | undefined }>`  /* valid highlight */  overflow-x: auto;  scroll-snap-type: x mandatory;   ${({ $isActive }) =>  $isActive  ? css`  overflow-x: unset;  scroll-snap-type: unset;  `  : ''} `;